一、使用负margin形成三栏布局的条件
- 三栏在html中的排列顺序为：中间栏、左边栏、右边栏（中间栏作为主要内容放在前面是为了优先渲染）
- 三栏都设置左浮动，且需要包裹在BFC中（清除浮动对其他文档流的影响）
- 两侧边栏宽度固定，中间栏宽度为100%自适应
- 左边栏设置margin-left: -100%，100%是父容器的宽度；
- 右边栏设置margin-left:-width，“width”是右边栏的固定宽度
- 父容器设置左右padding或中间设置左右margin预留出左边栏和右边栏存放的空间，预留的空间必须大于或等于左右两栏的固定宽度
- 左边栏和右边栏设置position：relative分别移到左右两边预留的空间
二、圣杯布局
-
实现步骤：
- 三个容器设置左浮动，并清除浮动；
- 第一个容器（中间栏）宽度设为100%；
- 第二个容器（左边栏）宽度固定为200px（固定值根据实际需求设定），且margin-left为-100%；
- 第三个容器（右边栏）宽度固定为200px（根据实际需求设定），且margin-left为-200px（自身宽度）；
- 三个容器的父容器设置左右padding分别为200px（左右两栏的宽度），用于存放左边栏和右边栏；
- 左边栏设置position: relative;、right:200px;使左边栏移动到第一个容器预留的左侧空间；
- 右边栏设置position: relative;、left: 200px;使右边栏移动到第一个容器预留的右侧空间；
- 完成。
结构代码：
<div class="ct">
<div class="box1"> </div>
<div class="box2"></div>
<div class="box3"></div>
</div>-
样式代码：
<style>
.ct{
padding-left: 200px;
padding-right: 200px;
}
.ct:after{
content: '';
display: block;
clear: both;
}
.box1{
float: left;
width: 100%;
height: 500px;
background: yellow;
}
.box2{
position: relative;
right: 200px;
float: left;
width: 200px;
height: 200px;
margin-left: -100%;
background: red;
}
.box3{
position: relative;
left: 200px;
float: left;
width: 200px;
height: 200px;
margin-left: -200px;
background: blue;
}
</style>
三、双飞翼布局
- 实现步骤：
- 三个容器设置左浮动，并清除浮动；
- 第一个容器（中间栏）宽度设为100%；
- 第二个容器（左边栏）宽度固定为200px（固定值根据实际需求设定），且margin-left为-100%；
- 第三个容器（右边栏）宽度固定为200px（根据实际需求设定），且margin-left
为-200px（自身宽度）； - 第一个容器中添加一个子元素用于存放主要内容，并将子元素的左右margin分别设为200px，预留出左边栏和右边栏的存放空间；
- 完成。
- 结构代码：
<div class="ct">
<div class="box1">
<div class="main"></div>
</div>
<div class="box2"></div>
<div class="box3"></div>
</div> - 样式代码：
<style>
.ct:after{
content: '';
display: block;
clear: both;
}
.box1{
float: left;
width: 100%;
height: 500px;
background: yellow;
}
.box2{
float: left;
width: 200px;
height: 200px;
margin-left: -100%;
background: red;
}
.box3{
float: left;
width: 200px;
height: 200px;
margin-left: -200px;
background: blue;
}
.main{
height: 500px;
margin-left: 200px;
margin-right: 200px;
background: green;
}
</style>
