需求 两边定宽，中间自适应。
实现
1. .main, .left, .right 依次排列，float: left;脱离文档流
2. .left: margin-left: -100%; .right: margin-left: 自身宽度; 拉到一行内
双飞翼
3. .main 内在嵌入div, div.style.margin: left right; 就可以实现
<!DOCTYPE html>
<html>
<head>
<title>双飞翼</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.left {
width: 100px;
background: red;
margin-left: -100%;
}
.right {
width: 200px;
background: green;
margin-left: -200px;
}
.main {
width: 100%;
background: blue;
background: #aaccdd;
}
.inner {
margin: 0 200px 0 100px;
}
.main, .left, .right {
float: left;
}
</style>
</head>
<body>
<div class="main">
<div class="inner">
main
</div>
</div>
<div class="left">
left
</div>
<div class="right">
right
</div>
</body>
</html>
圣杯布局
3. .container 包住 .main, .left, .right添加样式padding左右内边距。.left: 相对定位left负的自身宽度
.right: left正的自身宽度。
<!DOCTYPE html>
<html>
<head>
<title>圣杯布局</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.container {
width: 100%;
height: 100%;
padding: 0 200px 0 100px;
overflow: hidden;
box-sizing: border-box;
}
.left {
width: 100px;
background: red;
margin-left: -100%;
left: -100px;
}
.right {
width: 200px;
background: green;
margin-left: -200px;
left: 200px;
}
.main {
width: 100%;
background: blue;
position: relative;
background: #aaccdd;
}
.main, .left, .right {
float: left;
position: relative;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
main
</div>
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
</body>
</html>
