CSS中有很多实现两列等高的方法,下面我们讲一下其中一种方法。首先,我们需要在HTML中创建两个列的div,如下:<div class= column1 > <
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来处理高度问题。
粉丝
0
关注
0
收藏
0