54. 圣杯布局和双飞翼布局
一、圣杯布局实现
1. 使用浮动和负边距
<style>
.container {
padding-left: 200px;
padding-right: 200px;
}
.left, .right {
width: 200px;
height: 200px;
background: tomato;
float: left;
position: relative;
}
.left {
margin-left: -100%;
right: 200px;
}
.right {
margin-left: -200px;
left: 200px;
}
.center {
float: left;
width: 100%;
height: 200px;
background: skyblue;
}
</style>
<div class="container">
<div class="center">中央列</div>
<div class="left">左侧列</div>
<div class="right">右侧列</div>
</div>
这种实现方式使用了浮动和负边距。中央列占据整个父容器的宽度，左右两侧列使用了负的margin-left将它们移到正确的位置。同时，为了防止左右两侧列遮挡中央列的内容，需要给父容器添加左右两侧的padding。
2. 使用Flex布局
<style>
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.left, .right {
width: 200px;
height: 200px;
background: tomato;
}
.center {
flex: 1;
height: 200px;
background: skyblue;
}
</style>
<div class="container">
<div class="left">左侧列</div>
<div class="center">中央列</div>
<div class="right">右侧列</div>
</div>
这种实现方式使用了flex布局。通过给父容器设置display: flex，将中央列设置为flex: 1，使其自动占据剩余的宽度。
3. 使用定位
<style>
.container {
position: relative;
}
.center {
height: 200px;
background: skyblue;
margin-left: 200px;
margin-right: 200px;
}
.left, .right {
width: 200px;
height: 200px;
position: absolute;
top: 0;
background: tomato;
}
.left {
left: 0;
}
.right {
right: 0;
}
</style>
<div class="container">
<div class="center">中央列</div>
<div class="left">左侧列</div>
<div class="right">右侧列</div>
</div>
这种实现方式使用了position。中央列通过设置左右两侧的margin来使其占据正确的位置，其中，左侧列的left值为0，而右侧列的right值为0，这样可以将它们固定在页面的左右两侧。
二、双飞翼布局实现
<style>
/* 双飞翼 */
.container {
width: 100%;
float: left;
}
.center {
margin-left: 200px;
margin-right: 200px;
height: 200px;
background: skyblue;
}
.left {
width: 200px;
height: 200px;
background: tomato;
float: left;
margin-left: -100%;
}
.right {
width: 200px;
height: 200px;
background: tomato;
float: left;
margin-left: -200px;
}
</style>
<!-- 双飞翼 -->
<div class="container">
<div class="center">中央列</div>
</div>
<div class="left">左侧列</div>
<div class="right">右侧列</div>
这种实现方式使用了浮动和负边距。中央列占据整个父容器的宽度，并设置了左右两侧的margin使其不会被遮挡。左右两侧列使用了负的margin-left将它们移到正确的位置，而为了防止左右两侧列遮挡中央列的内容，需要给中央列设置左右两侧的margin。
需要注意的是，由于左右两侧列是浮动的，所以它们的高度无法撑开父容器，需要在父容器上添加overflow:hidden来防止内容溢出。此外，由于左右两侧列的宽度是固定的，如果需要适应不同的屏幕尺寸，可以使用媒体查询来改变它们的宽度。
