[分享]css两列高度自适应

在Web开发中，经常会出现需要将一个页面分为两份内容展示的情况。一般情况下，我们会使用两个进行布局。但是当这两个的高度不同时，会出现页面显示不整齐的问题。解决这个问题的方法就是使用CSS实现两列高度自...

在Web开发中，经常会出现需要将一个页面分为两份内容展示的情况。一般情况下，我们会使用两个<div>进行布局。但是当这两个<div>的高度不同时，会出现页面显示不整齐的问题。解决这个问题的方法就是使用CSS实现两列高度自适应。

实现两列高度自适应的方法有很多。下面介绍两种常用的方法。

1. 使用display: table-cell

.column-container {
    display: table;
    width: 100%;
}

.column {
    display: table-cell;
    vertical-align: top;
}

.left-column {
    width: 30%;
}

.right-column {
    width: 70%;
} 

上述代码中，通过将.column-container设置为display: table，将.column设置为display: table-cell，实现两列等高。其中.left-column和.right-column分别设置了不同的宽度。

2. 使用flexbox

.column-container {
    display: flex;
    width: 100%;
}

.left-column {
    width: 30%;
}

.right-column {
    width: 70%;
} 

上述代码中，通过将.column-container设置为display: flex，并将两列分别设置不同的宽度即可实现两列等高。由于使用flexbox实现两列等高更加简单，建议在可使用的情况下优先使用该方法。

总结：无论是使用display: table-cell还是flexbox，实现两列等高都非常简单。不同的方法在代码实现上有所不同，建议在具体实现时根据情况选择最适合的方法。