[分享]css两列div自适应等高

CSS中有很多实现两列等高的方法，下面我们讲一下其中一种方法。首先，我们需要在HTML中创建两个列的div，如下： 接下来，我们需要使用CSS让这两个列等高。方法是通过给这两个列的父元素设置di...

CSS中有很多实现两列等高的方法，下面我们讲一下其中一种方法。

首先，我们需要在HTML中创建两个列的div，如下：

<div class="column1">
    <!-- 内容 -->
</div>

<div class="column2">
    <!-- 内容 -->
</div> 

接下来，我们需要使用CSS让这两个列等高。方法是通过给这两个列的父元素设置display:table和宽度百分比来实现。具体代码如下：

<style>
    .container{
        display: table;
        width: 100%; /* 父元素宽度 */
    }
    .column1, .column2{
        display: table-cell;
        vertical-align: top;
        width: 50%; /* 列宽度 */
    }
</style>

<div class="container">
    <div class="column1">
        <!-- 内容 -->
    </div>

    <div class="column2">
        <!-- 内容 -->
    </div>
</div> 

这样，两个列就能够自适应等高了。需要注意的是，如果两个列中的内容数量不同，那么会导致高度不一致。此时，我们可以使用JS来处理高度问题。