玄学-等高

by bowen zhao

HTML

<section style='background: gray;'>
  <div class="div">玄学：等高布局</div>
  <div class="div">
    <ol>
      <li>把他们的顶部对齐，可以用vertical-align也可以用float</li>
      <li>顶部对齐了之后，就要解决高度的差异。两种选择：高的截短；短的补长。很明显前者是个bug</li>
      <li>利用padding-bottom来增加到足够高（至少比内容高度多出一个数量级）</li>
      <li>margin-bottom等量的负值来收缩父元素的高度</li>
      <li>父元素overflow：hidden隐藏多出来的高度</li>
    </ol>
  </div>
</section>

SCSS

.div {
  // 1. 把他们的顶部对齐
  // vertical-align: top;
  // display: inline-block;
  
  // 1.1 也可以用float把顶部对齐
  float: left;
  
  // 2.顶部对齐了之后，就要解决高度的差异。两种选择：高的截短；短的补长。很明显前者是个bug。
  
  /* 2.1 利用padding-bottom来增加到足够高（至少比内容高度多出一个数量级） */
  padding-bottom: 9999px;
  /* 2.2 margin-bottom等量的负值来收缩父元素的高度*/  
  margin-bottom: -9999px;
  // 3. 父元素overflow：hidden隐藏多出来的高度 
  

  // 辅助样式
  width: 300px;
  background-color: red;
  &:nth-child(odd) {
    background-color: pink;
  }
  
}

section {
  overflow: hidden;
}