圣杯布局(传智播客)
2018-08-27 本文已影响347人
李chun
本教程来源 传智播客 的视频教程
image.png
image.png
效果图
9.gif
圣杯布局
固比固(两侧固定宽度,中间宽度百分比自适应)
image.png
image.png
image.png
过程步骤
0
现在有一个父容器.container和左中右三个子盒子,.main .left .right ,先写第二个盒子.
给他们设置宽高和背景颜色
html结构
<body>
<div class="container">
<div class="main">main中间自适应</div>
<div class="left">left固定宽度</div>
<div class="right">right固定宽度</div>
</div>
</body>
image.png
1
使子盒子都浮动,给父容器加清除浮动overflow: hidden;zoom: 1
image.png
image.png
2
设置.left和.right的margin-left,让他们压到.面的左右两边.
image.png
10.gif
image.png
3
.container设置左右padding,把三个子盒子压挤到中间
image.png
11.gif
image.png
4
让.left相对自己现在位置往左移动,让.right相对自己现在位置往右移动.
image.png
12.gif
image.png
代码
image.png
image.png
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
<!--此参考教程 传智播客 的讲圣杯布局和双飞翼布局-->
<div class="container">
<div class="main">main中间自适应</div>
<div class="left">left固定宽度</div>
<div class="right">right固定宽度</div>
</div>
</body>
</html>
index.css
/*预处理body,最小宽度*/
body{margin: 0;padding: 0;color: #fff;text-align: center; min-width: 800px;}
/*主容器,清除浮动*/
.container{overflow: hidden;zoom: 1;padding-left: 200px;padding-right: 90px;}
/*宽度,高度,背景颜色*/
.main{width: 100%;height: 200px;background: #CCCC33;
float: left
}
.left{width: 200px;height: 230px;background: #0000FF;
float: left;margin-left: -100%;
position: relative;left: -200px;}
.right{width: 90px;height: 230px;background: #800080;
float: left;margin-left: -90px;
position: relative;left: 90px;}
