Web页面中八种创建多列等高(等高列布局)的实现技术

下面就来详细讲解一下“Web页面中八种创建多列等高(等高列布局)的实现技术”的攻略。

一、使用Flexbox布局

使用Flexbox布局是一种常用的创建多列等高布局的方式，需要设置父容器的display属性为flex，并且给子元素设置flex-grow:1，如下所示：

.container {
  display: flex;
}

.item {
  flex-grow: 1;
}

这种方法比较简单，不需要设置太多的样式，但是需要注意的是，Flexbox布局的兼容性不是很好，需要考虑兼容性问题。

二、使用Table布局

使用Table布局也是一种常用的创建多列等高布局的方式，需要把父容器的display属性设置为table，子元素的display属性设置为table-cell，如下所示：

.container {
  display: table;
}

.item {
  display: table-cell;
}

这种方法也比较简单，但是需要注意的是，Table布局不太适合用于整个页面的布局，因为会对页面语义造成影响。

三、使用Grid布局

使用Grid布局是一种比较新的创建多列等高布局的方式，需要设置父容器的display属性为grid，并且给子元素设置grid-column: 1 / -1，如下所示：

.container {
  display: grid;
}

.item {
  grid-column: 1 / -1;
}

这种方法比较简单，而且还支持多种复杂的布局方式，但是需要考虑兼容性问题。

四、使用Position布局

使用Position布局也是一种常用的创建多列等高布局的方式，需要把父容器的position属性设置为relative，子元素的position属性设置为absolute，并且设置top、bottom两个属性的值为0，如下所示：

.container {
  position: relative;
}

.item {
  position: absolute;
  top: 0;
  bottom: 0;
}

这种方法实现起来比较简单，但是需要注意的是，子元素的高度不宜过高，否则会影响其他元素的布局。

五、使用Float布局

使用Float布局也是一种常用的创建多列等高布局的方式，需要把子元素的float属性设置为left或right，并且给父容器设置overflow:hidden，如下所示：

.container {
  overflow: hidden;
}

.item {
  float: left;
}

这种方法一开始比较流行，但是因为会影响页面其他元素的布局，所以现在已经不太推荐使用了。

六、使用Inline-block布局

使用Inline-block布局也是一种比较常见的创建多列等高布局的方式，需要把子元素的display属性设置为inline-block，并且给父容器设置font-size:0，如下所示：

.container {
  font-size: 0;
}

.item {
  display: inline-block;
  vertical-align: top;
}

这种方法也比较简单，但是需要注意的是，子元素之间的空隙不宜太大。

七、使用CSS3多列布局

使用CSS3多列布局是一种比较新的创建多列等高布局的方式，需要给父容器设置columns属性，并且给子元素设置break-inside: avoid，如下所示：

.container {
  columns: 3;
}

.item {
  break-inside: avoid;
}

这种方法比较简单，而且还支持多列的布局方式，但是需要注意的是，CSS3多列布局的兼容性存在一定的问题。

八、使用JavaScript动态计算高度

使用JavaScript动态计算高度是一种比较依赖脚本的创建多列等高布局的方式，需要先给子元素设置position: absolute，然后通过计算子元素的高度来设置父容器的高度，如下所示：

.container {
  position: relative;
}

.item {
  position: absolute;
}

/* JS */
var maxHeight = 0;
$('.container .item').each(function() {
  maxHeight = Math.max(maxHeight, $(this).height());
});
$('.container').height(maxHeight);

这种方法实现起来比较灵活，而且可以兼容到较早的浏览器，但是需要注意的是，需要使用JavaScript来实现，略微有一定的性能问题。

示例一：

<div class="container">
  <div class="item">内容1</div>
  <div class="item">内容2</div>
  <div class="item">内容3</div>
</div>

使用Flexbox布局的样式：（注意需要加上浏览器兼容前缀）

.container {
  display: -webkit-flex;
  display: flex;
}

.item {
  -webkit-flex-grow: 1;
  flex-grow: 1;
}

示例二：

<div class="container">
  <div class="item">内容1</div>
  <div class="item">内容2</div>
  <div class="item">内容3</div>
</div>

使用Grid布局的样式：

.container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
}

.item {
  -ms-grid-column: auto;
  -ms-grid-row: 1;
  grid-column: auto;
  grid-row: 1;
}

以上就是“Web页面中八种创建多列等高(等高列布局)的实现技术”的完整攻略，希望可以对你有所帮助。