效果图如下,当改变页面的宽度 两侧的宽度为50px,中间自适应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>d</title>
<style>
.container{
height: 500px;
padding: 0 50px; /*左右内边距预留出左右两侧容器的宽度*/
}
.container > div{ /*使左右及中间的元素浮动*/
float: left;
height: 500px;
}
.center{ /*设置中间的元素的宽度为百分之百*/
width: 100%;
background: red;
}
.left,.right{ /*设置左右元素的宽度*/
width: 50px;
background: #0000FF;
}
.left{
margin-left:-50px; /*使左边的元素的marign 偏移值相对于自身,其后元素不受影响*/
}
.right{
margin-right: -50px;/*设置右边元素的margin值*/
}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</body>
</html>