三栏布局
- 页面布局时,中间弹性区域放在最上层,首先渲染
- 给他们分别设置浮动:左栏,中间栏左浮动,右栏右浮动
- 使用负margin把左右两栏拉回同一行
- 接下来解决中间区域被遮挡
- 父元素设置padding给左右两栏留出空位
- 左右两栏再使用相对定位铺满
<style>
.box1 {
border: 1px solid red;
height: 100px;
padding: 0 80px;
}
.box1 .left {
width: 80px;
height: 100px;
background-color: rgb(185, 201, 253);
float: left;
margin-left: -100%;
position: relative;
left: -80px;
}
.box1 .right {
width: 80px;
height: 100px;
background-color: rgb(178, 224, 250);
float: left;
margin-left: -80px;
position: relative;
right: -80px;
}
.box1 .center {
width: 100%;
height: 100px;
background-color: rgb(141, 192, 250);
float: left;
}
</style>
<body>
<div class="box1">
<div class="center">圣杯布局中间弹性区域</div>
<div class="left">左固定</div>
<div class="right">右固定</div>
</div>
</body>
- 页面布局时,,中间弹性区域放在最上层,首先渲染
- 给他们分别设置浮动:左栏,中间栏左浮动,右栏右浮动
- 使用负margin把左右两栏拉回同一行
- 接下来解决中间区域被遮挡
- 给中间区域套一层div,设置宽度100%,浮动
- 里面内容区域设置左右margin来给两边区域让位
<style>
.box2 {
border: 1px solid red;
height: 100px;
}
.box2 .center-box {
width: 100%;
float: left;
}
.box2 .center {
height: 100px;
background-color:rgb(141, 192, 250);
margin: 0 80px;
}
.box2 .left {
width: 80px;
height: 100px;
background-color: rgb(185, 201, 253);
float: left;
margin-left: -100%;
}
.box2 .right {
width: 80px;
height: 100px;
background-color: rgb(178, 224, 250);
float: left;
margin-left: -80px;
}
</style>
<body>
<div class="box2">
<div class="center-box">
<div class="center">双飞翼布局中间弹性区域</div>
</div>
<div class="left">左固定</div>
<div class="right">右固定</div>
</div>
</body>