如何实现不同元素的等高排列

在业务开发中，遇到这样一个问题：

有不同大小的图片，横排成一行排列，宽度已经设为相同，图片适应成不同高度。现在需要让包裹图片的标签等高，通过css有什么方法实现呢？

示意图.png

解决

先建立一个模型。

// index.html
<style>
    .item {
        background: blue;
        float: left;
        width: 100px;
    }
</style>

<div class="wrapper">
    <div class="item" style="height: 300px"></div>
    <div class="item" style="height: 200px"></div>
    <div class="item" style="height: 100px"></div>
</div>

方法1：使用padding/margin

.wrapper {
    overflow: hidden
}

.item {
    float: left;
    padding-bottom: 3000px;
    padding-margin: -3000px;
}

或者

.wrapper {
    overflow: hidden;
    // font-size: 0;
}

.item {
    display: inline-block;
    padding-bottom: 3000px;
    margin-bottom: -3000px;
    vertical-align: top;
    font-size: 12px;
}

通过padding-bottom撑开元素的高度;再使用margin-bottom和overflow:hidden隐藏内容外的高度。将值设成一个较大的值，一般能覆盖所有可能的高度。

如果不使用float: left还可以使用display:inline-block。由于inline-block相当于父元素的行内元素，元素之间会有空隙，需要在父元素上设置font-size:0，并在后面的子孙元素中恢复值；同时行内元素默认从底部对齐，上方会出现空隙，需要设置vertiacal-align:top，将元素从顶部对齐。

这种方式兼容性好，但是看上去比较hack，语义性不好，一眼让人看不懂想做什么。

方法2：使用table

使用

<table>
  <tr>
    <td>
      <div class="item" style="height: 300px"></div>
    </td>
    <td>
      <div class="item" style="height: 200px"></div>
    </td>
    <td>
      <div class="item" style="height: 100px"></div>
    </td>
  </tr>
</table>

利用table来实现，同一行下的td是等高的。

这种方式兼容性也很好，但是要使用额外的table元素去包裹，有标签冗余。

方法3：使用display

// html

<style>
.wrapper {
    display: table-row;
}

.item {
    display: table-cell;
}
    
</style>

和上面使用table的原理一样，同时可以应用在已有的元素上。观察table可以发现，table、tr、td也是使用了display属性来实现的。

这种方式兼容性好，同时也不用添加额外的标签，语义性也更好。

最后编辑于：2018.03.22 19:57:29