需求:三列布局:两边定宽,中间自适应
方式1:(利用浮动)
css样式部分:
<style>
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
div{
float:left;
height:100%;
}
.main{
background:blue;
width:100%;
box-sizing:border-box;
padding-left:200px;
padding-right:200px;
}
.left{
background:purple;
width:200px;
margin-left:-100%;/*其实就是左边框距离右边的距离为100%*/
}
.right{
background:green;
width:200px;
margin-right:-100%;
}
</style>
html部分:
<body>
<div class="main">中间的内容</div>
<div class="left">左边</div>
<div class="right">右边</div>
</body>
这里需要注意一点,就是中间自适应的那一块放在最前面。
第二个需要知道的知识点是box-sizing的用法。
方式2:(利用flex布局)
html部分:
<body>
<div class="wrapper">
<div class="left">左边</div>
<div class="center">中间</div>
<div class="right">右边</div>
</div>
</body>
css部分:
<style>
html,body{
padding:0;
margin:0;
}
.wrapper{
width:800px;
height:300px;
border:1px solid black;
display:flex;
margin:0 auto;
}
.left,.right,.center{
height:300px;
}
.left,.right{
flex:0 0 200px;
width:200px;
background:cornflowerblue;
}
.center{
margin:0 10px;
flex:1;
background:pink;
}
</style>
运行结果:
方式3:(利用position的绝对定位)
css部分:
<style>
html,body{
margin:0;
padding:0;
}
.wrapper{
position:relative;
width:800px;
height:400px;
border:1px solid black;
}
.main{
width:100%;
height:400px;
box-sizing:border-box;
padding:0 200px;
background:pink;
}
.left,.right{
position:absolute;
width:200px;
height:400px;
background:dodgerblue;
}
.left{
left:0;
top:0;
}
.right{
top:0;
right:0;
}
</style>
html部分:
<body>
<div class="wrapper">
<div class="main">中间内容区</div>
<div class="left">左边区域</div>
<div class="right">右边区域</div>
</div>
</body>
运行结果: