html如何实现左右布局,前端中的左右布局实现

前端的布局中，左右布局是一种很常见布局方式，下面是我在前端工作中的几种方法：

1、float实现左右布局

左右布局实现的一个有效方法是利用css中的float属性,代码如下：

//html

//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实现左右布局

这种方法是把子元素变为行内块元素，从而实现元素的左右排列。

//html

//css

.box{

width: 300px;

height: 200px;

background: darkgray;

}

.left-box,.right-box{

width: 50%;

height: 100%;

display: inline-block;//子元素变为行内块

}

.left-box{

background: red;

}

.right-box{

background: green;

}

复制代码

但是如果直接这样写，我们运行后会发现并不能实现左右居中，右边的盒子会直接掉下去，情况如下：

这是因为block的元素inline-block化后，IE6/7没有换行符间隙问题，其他浏览器均有；inline的元素inline-block后，所有主流浏览器都有换行符/空格间隙问题；

即两个inline-blockb元素中间会有空隙。造成原本在一列的元素变成两列，

解决这种问题，只需在父元素添加font-size：0；即可解决：

.box{

width: 300px;

height: 200px;

background: darkgray;

font-size: 0;//设置字体大小为0

}

.left-box,.right-box{

width: 50%;

height: 100%;

display: inline-block;

}

.left-box{

background: red;

}

.right-box{

background: green;

}

复制代码

3、 绝对定位实现左右布局

绝对定位也是一种解决左右布局的好方法，在父元素设置相对定位，子元素设置绝对定位：

//html

//css

.box{

width: 300px;

height: 200px;

background: darkgray;

position: relative;//父元素设置相对定位

}

.left-box,.right-box{

position: absolute;//子元素绝对定位

width: 50%;

height: 100%;

}

.left-box{

background: red;

}

.right-box{

left: 50%;//设置left为左边盒子的宽度

background: green;

}

复制代码

这种实现的效果和上边一样，不再附图。

另外也有用table、float+margin实现的，table这种在早期开发中比较常见，在现在开发中基本销声匿迹，float+margin等实现起来比较麻烦，故不介绍。