三栏布局 分两种:
中间自适应,两边定宽
1.左边 float:left 右边float:right 中间 margin 上下0 左右分别是 左边和右边 的宽
中间 : min-width: 100px; /* 最小宽度,防止浏览器缩小后中间部分被隐藏 */
2.左边右边绝对定位 top:0 left,right:0 中间 margin 上下0 左右分别是 左边和右边 的宽
3.用容器包裹三栏,并将容器的display设置为flex,左右两部分宽度设置为固定,中间flex设置为1
以上三种方法 中间部分都不设宽 所以叫自适应
圣杯布局:
1.container padding-left padding-right 留出左、右部分宽度
2.dom结构时 center写在前面
3.center、left、right
三个都float:left
4.center 100% 左边,右边 各自设置 固定宽度
5.footer 清除浮动
6.左边:margin-left:-100% 相对定位 right:左部分宽度
这个效果我不懂 就这么记吧
7.右边:margin-right:- 右部分宽度
8.body:min-width:左宽度x2 + 右宽度
dom:
<div id="header"></div>
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
<div id="footer"></div>
css:
body {
min-width: 550px;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
}
#right {
width: 150px;
margin-right: -150px;
}
#footer {
clear: both;
}
双飞翼:
dom:
<body>
<div id="header"></div>
<div id="container" class="column">
<div id="center"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>
<body>
css:
#container {
width: 100%;
}
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px;
}
#right {
width: 150px;
}
#footer {
clear: both;
}
1.container 宽度 100%
2.container、left、right 都设置 float:left
3.center 设置 margin-left:左边宽度 margin-right:右边宽度
(圣杯:container: padding-left padding-right 留出左、右部分宽度 然后 center:就100% float)
左边、右边 各自设置 自己的宽度
4.footer 清除浮动
(三部分 都 flloat:left)
5.左边:margin-left:-100%
6.右边:margin-right:- 右部分宽度
7.body:min-width:左宽度 + 右宽度 + 留给中间宽度