圣杯布局和双飞翼布局的目的
- 三栏布局，中间一栏最先加载和渲染（内容最重要）
- 两侧内容固定，中间内容随着宽度自适应
- 一般用于pc网页
技术总结
- 使用float布局
- 两侧使用margin负值以便和中间内容横向重叠
- 防止中间内容被两侧覆盖，一个用padding， 一个用margin
技术要点
- margin-top和margin-left负值，元素向上、向左移动
- margin-right负值，右侧元素左移，自身不影响
- margin-bottom 负值，下方元素上移，自身不影响
圣杯布局
使用padding和margin负值以及position实现
<style>
body {
min-width: 550px;
}
#header {
background-color: blanchedalmond;
}
#main {
padding-left: 200px;
padding-right: 200px;
}
#center {
width: 100%;
}
#left {
background: red;
width: 200px;
margin-left: -100%; // 向左移动，父元素的宽度，到达center的最左侧
position: relative;
right: 200px; // 根据自身向左移动
}
#right {
background: gold;
width: 200px;
margin-right: -200px;
}
#footer {
background-color: aquamarine;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
#main .column {
float: left;
}
</style>
<body>
<div id="header">头部</div>
<div id="main" class="clearfix">
<div id="center" class="column">中</div>
<div id="left" class="column">左</div>
<div id="right" class="column">右</div>
</div>
<div id="footer">底部</div>
</body>
双飞翼布局
使用margin和margin负值实现
<style>
body {
min-width: 550px;
}
#main {
width: 100%;
height: 200px;
background: red;
}
.column {
float: left;
}
#left {
width: 200px;
height: 200px;
background-color: aquamarine;
margin-left: -100%;
}
#right{
width: 200px;
height: 200px;
background-color: blue;
margin-left: -200px;
}
#main-warp {
margin: 0 200px 0 200px;
}
</style>
<body>
<div id="main" class="column">
<div id="main-warp">中</div>
</div>
<div id="left" class="column">左</div>
<div id="right" class="column">右</div>
</body>
