css左右布局高度 |css中blink

在实现左右布局时，大家通常会将页面的左侧和右侧分别用div进行包裹，并使用float属性来让它们排列在一行中，代码如下：

<div class="left">
左侧内容
</div>
<div class="right">
右侧内容
</div>
.left {
width: 50%;
float: left;
}
.right {
width: 50%;
float: right;
}

但是通过上面的代码，大家会发现左右两侧的高度并不一致，这会让整个布局显得十分不协调。大家可以通过以下两种方法来解决这个问题。

第一种方法是使用clear属性来清除浮动。具体来说，大家需要在左侧和右侧的div之后添加一个空div，然后在该div上添加clear属性，代码如下：

<div class="left">
左侧内容
</div>
<div class="right">
右侧内容
</div>
<div class="clear"></div>
.left {
width: 50%;
float: left;
}
.right {
width: 50%;
float: right;
}
.clear {
clear: both;
}

这样，大家就可以保证左右两侧的高度一致了。

第二种方法是使用flex布局。具体来说，大家可以将页面的父元素设置为display:flex，然后将左侧和右侧的div都设置为flex:1，代码如下：

<div class="container">
<div class="left">
左侧内容
</div>
<div class="right">
右侧内容
</div>
</div>
.container {
display: flex;
}
.left {
flex: 1;
}
.right {
flex: 1;
}

这样，左右两侧的高度也可以实现自适应了。

通过上面两种方法的介绍，大家可以发现在CSS中实现左右布局高度自适应还是比较简单的。大家只需要选择适合自己的方法进行实现即可。