[分享]css两列布局高度相等

CSS两列布局是常用的页面布局之一。在实现过程中，经常会遇到一个问题：如何让两列的高度相等？本文将详细介绍解决方法。 首先，我们来看一下两列布局的基本结构： 其中，wrapper是容器的类名，...

CSS两列布局是常用的页面布局之一。在实现过程中，经常会遇到一个问题：如何让两列的高度相等？本文将详细介绍解决方法。
首先，我们来看一下两列布局的基本结构：

<div class="wrapper">
  <div class="left"></div>
  <div class="right"></div>
</div> 

其中，wrapper是容器的类名，left和right是两列的类名。
解决两列高度不相等的方法有很多种，下面我们会一一介绍。
方法一：使用flexbox布局
Flexbox是CSS3新增的一种布局方式，可以轻松实现两列布局高度相等。代码如下：

.wrapper {
  display: flex;
}
<br>
.left, .right {
  flex: 1;
} 

这里，我们将wrapper的display属性设置为flex，使其成为弹性容器。然后，给left和right设置flex属性为1，表示它们在容器中平分剩余空间。
方法二：使用float布局
使用float布局也可以实现两列高度相等，但需要注意清除浮动。代码如下：

.wrapper {
  overflow: hidden;
}
<br>
.left {
  float: left;
  width: 50%;
}
<br>
.right {
  float: left;
  width: 50%;
} 

这里，我们将wrapper的overflow属性设置为hidden，使其成为BFC，可以清除浮动。然后，给left和right设置float属性为left，使它们左浮动，并且宽度都为50%。
方法三：使用表格布局
使用表格布局也可以轻松实现两列高度相等，而且也不需要考虑清除浮动的问题。代码如下：

.wrapper {
  display: table;
  width: 100%;
  table-layout: fixed;
}
<br>
.left, .right {
  display: table-cell;
}
<br>
.left {
  width: 50%;
} 

这里，我们将wrapper的display属性设置为table，使其成为表格布局。然后，给left和right设置display属性为table-cell，使它们像表格单元格一样排列。最后，给left设置宽度为50%，表格布局会自动调整大致相等的高度。
综上所述，通过使用flexbox、float布局和表格布局，我们可以轻松实现两列布局高度相等。在项目开发过程中，可以根据实际需要选择不同的方法。