前端得布局中,左右布局是一种很常见布局方式,下面是我在前端工作中的几种方法:
1、float实现左右布局
左右布局实现的一个有效方法是利用css中的float属性,代码如下:
//html
<div class="box">
<div class="left-box"></div>
<div class="right-box"></div>
</div>
//css
.box{
width: 400px;
height: 300px;
background: darkgray;
}
.left-box,.right-box{
width: 50%;
height: 100%;
float: left;//设置两个盒子float:left
}
.left-box{
background: red;
}
.right-box{
background: green;
}
复制代码
我们很容易就得到了一个左右布局:
但这种方法也并非完美,需要注意浮动所导致的父元素高度塌陷的问题,这就涉及要清除浮动的问题了,清除浮动的方法也有很多,我比较推荐用伪元素清除的方法。这个会单独介绍。
2、 display: inline-block实现左右布局
这种方法是把子元素变为行内块元素