css
圣杯布局
布局思路:
<div class="container">
<div class="content">中间内容</div>
<div class="left">左侧区域</div>
<div class="right">右侧区域</div>
</div>
首先3个子盒子都左浮动:如图
.content{
float: left;
width: 100%;
background-color: #bfa;
}
.left{
float: left;
width: 200px;
background-color: #00f;
}
.right{
float: left;
width: 300px;
background-color: #0f0;
}
.container{
padding: 0 300px 0 200px;
border: 1px solid #000;
}
然后,父盒子给左右内边距宽度分别是左右侧的宽度.
左侧盒子margin-left:100%;
说明向右移动了它上面盒子的宽度,同理如果是margin-left:-100%;就是向左移动100%上面盒子的宽度.
/* 相对于自己向左移动自身的宽度,经测试只要向左移动自身的宽度且父元素的右内边距大于等于自己的宽度就可以上去 */
那么怎么才能让左侧盒子移动到最左边呢?可以用定位来解决:postion:relative;left:-200px;相对于组件的左边框向左移动自身的宽度,内边距刚好是自身的宽度,所以刚好到了最左边.
同理:右侧盒子margin-left:-300px;向左移动自身的宽度,到了上面,因为有内边距,所以它会在中间内容的上面.
经调试margin-left,可证明右侧区域覆盖了部分中间内容
同理:给右侧区域定位. position: relative;
/* 相对于自己的右边框向右移动自身的宽度刚好等于右内边距 */
right: -300px;
如图:
至此实现了效果图.
总结:先浮动设置父盒子内边距为左右盒子的宽度,然后通过margin把盒子移动到中间内容上,然后通过定位定到两边.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
padding: 0 300px 0 200px;
border: 1px solid black;
}
.content{
float: left;
width: 100%;
background: #f00;
}
.left{
width: 200px;
background:#0f0;
float: left;
/* 是中间区域的宽度 */
margin-left: -100%;
/* 相对于自己的左边框向左移动自身的宽度 */
position: relative;
left:-200px;
}
.right{
width: 300px;
background: #00f;
float: left;
/* 相对于自己向左移动自身的宽度,经测试只要向左移动自身的宽度且父元素的右内边距大于等于自己的宽度就可以上去 */
margin-left: -300px;
position: relative;
/* 相对于自己的右边框向右移动自身的宽度刚好等于右内边距 */
right: -300px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">中间内容</div>
<div class="left">左侧区域</div>
<div class="right">右侧区域</div>
</div>
</body>
</html>
\
