高效-2多列等高

多列等高

方案一：设置一个很大的padding 再来一个很大的负的margin值矫正回去

<pre>多列等高</pre>  

<div class="wrapper">
  <div>测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高</div>
   <div>测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高</div>
  <div>测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高</div>
  <div>测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高测试多行等高</div>
</div>

<style>
  .wrapper{
    overflow: hidden;
  }
  .wrapper > div{
    width: 23%;
    float: left;
    border: 1px solid #ccc;
    background: lightgreen;
    /*关键代码*/
    padding-bottom: 9999px;
    margin-bottom: -9960px;
  }
</style>

image.png

这种方案虽然对齐了，但是底部的border没有了，设置的圆角也没生效。

方案二：借助table自适应的特性

.wrapper > div{
  border: 1px solid #ccc;
  background: lightgreen;
  display: table-cell;
  width: 20000px; /*设置很大的宽度，table自动平分宽度*/
  border-radius: 10px;/*这里的圆角就正常了*/
}

image.png

这种方法还可以借助媒体查询实现响应式，小于500px时每列占一行。

    @media (max-width:500px) {
      .wrapper {
        display: block;
      }
      .wrapper>div {
        display: block;
        width: 100%;
      }
    }

03.gif

如果想实现在1024px的设备上一行显示两列，可以在第二个和第三个中间加个tr

    <div class="wrapper">
      <div>column 1</div>
      <div>column 2</div>
    <!-- 关键代码 start -->
      <span class="tr"></span>
    <!-- 关键代码  end-->
      <div>column 3</div>
      <div>column 4</div>
    </div>

    <style>
    .tr{
        display: none;
    }
    @media (max-width:1024px) and (min-width: 501px) {
      .tr{
        display: table-row;
      }
    }
    </style>

03.gif

但是这里有个小问题：中屏拉到大屏时 tr的display：none已经没有作用了，因为table的布局已经计算好了。但是一般不用考虑这种拉伸范围很大的情况，正常的刷新页面是可以的，如果真要解决则需要借助js