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{
html里的float是什么意思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等实现起来⽐较⿇烦，故不介绍。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。