看了些文档和网上的资源,大概有四种方法。如有错误,欢迎各位指正。以下先贴代码再来解释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三个div并排</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.container{
width:500px;
height:200px;
margin: 10px auto;
}
.left,
.right{
width: 100px;
height: 100%;
background-color: antiquewhite;
}
.center{
background-color: aquamarine;
}
/*方法一:float*/
.float .left{
float: left;
}
.float .right{
float: right;
}
.float .center{
height: 100%;
margin: 0px 100px;
}
.float .container:after{
display: block;
content: "";
height: 0px;
clear: both;
overflow: hidden;
zoom: 1;
}
/*方法二:position法*/
.position{
position: relative;
}
.position .left{
position: absolute;
top: 0px;
left: 0px;
}
.position .right{
position: absolute;
top: 0px;
right: 0px;
}
.position .center{
height: 100%;
margin: 0px 100px;
}
/*方法三:flex*/
.flex{
display: flex;
flex-direction: row;
}
.flex .left,.right{
flex-basis: 100px;
-webkit-flex-basis: 100px;
}
.flex .center{
flex-grow: 1;
}
/*方法四:table法*/
.table{
display: table;
}
.table .inner{
display: table-cell;
}
</style>
</head>
<body>
<p>实现三个并排div,两边固定宽度,中间自适应的四个方法</p>
<div class="container float">
<div class="left"></div>
<div class="right"></div>
<div class="center">方法一:float法</div>
</div>
<div class="container position">
<div class="left"></div>
<div class="center">方法二:position法</div>
<div class="right"></div>
</div>
<div class="container flex">
<div class="left"></div>
<div class="center">方法三:flex法</div>
<div class="right"></div>
</div>
<div class="container table">
<div class="left inner"></div>
<div class="center inner">方法四:table法</div>
<div class="right inner"></div>
</div>
</body>
</html>
方法一:float法。想必用得挺多,使左右两边的div分别向左/右浮动,脱离正常流。注意把中间div放在最后,最后清楚浮动即可。
方法二:position法。父级div相对布局,然后左右div针对父级决定布局,中间自适应。
方法三:flex法。display:flex;是css3新出的弹性盒模型。用flex-diretion:row;决定父级div主轴方向为水平铺开。flex-basis;让左右div占据主轴100px。flex-grow定义中间div的放大比例为1,适应剩下的宽度
方法四:table法。也是css3新出的属性。
附:关于flex法,可参考的链接有:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.w3cplus.com/css3/flexbox-basics.html
http://blog.csdn.net/linda_417/article/details/51507176
此文为个人总结,后续还会补充。