目录
1. 两栏布局
2. 左右定宽中间自适应的三栏布局(圣杯、双飞翼)
3. 平均布局
- 以下代码均在http://js.jirengu.com/上跑完
1. float左右布局
- 两个盒子左右浮动，形成左右布局，外层盒子添加clearfix类名，解决父元素高度坍塌问题。
HTML:
<div class="wrapper clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
CSS:
.left {
float: left;
background: red;
width: 200px;
height: 200px;
}
.right {
float: right;
width: 200px;
height: 200px;
background: green;
}
.clearfix::after {
content: '';
display: block;
}
效果:
image.png
2.(1) 圣杯布局
先构建HTML代码，将最重要的中间部分放最前面，最先渲染
<div class="wrapper clearfix">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
CSS方面，先将中间div设为100%宽度，让三个div浮动起来，解决父盒子坍塌
.clearfix {
content: '';
display: block;
clear: both;
}
.left, .right, .middle {
width: 200px;
height: 200px;
float: left;
}
.middle {
width: 100%;
height: 200px;
background-color: red;
}
.left {
background-color: blue;
}
.right {
background-color: green;
}
目前效果如下：
image.png
接下来就要让下面的两个div上来，用我们神奇的负边距！
.left {
background-color: blue;
margin-left: -100%; /*给left盒子加上100%宽度的负边距*/
}
.right {
background-color: green;
margin-left: -200px;
}
此时的效果：
image.png
，
中间div可以自适应拉伸，但中间的div左右有部分被压住了，不信你看："middle"文字不见了！此时就要用到relative定位将left和right分别左右移了
.left {
background-color: blue;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
background-color: green;
margin-left: -200px;
position: relative;
right: -200px;
}
大功告成
image.png
2.(2) 双飞翼布局
双飞翼布局和圣杯布局很类似，过程如下：
- 首先还是写一个一样的HTML结构，三个div浮动，给最外层div清除浮动
- 中间部分宽度100%，左右盒子定宽，给左右盒子设置负外边距，使其跑上来
- 接下来，圣杯布局采取左右盒子relative定位移位的方法，而双飞翼布局采用在middle盒子中套一个小div，给这个小div设置左右margin，达到左右定宽中间自适应的效果。
贴代码啦！！！
HTML
<div class="wrapper clearfix">
<div class="middle">
<div class="middle-inner">middle</div> </div>
<div class="left">left</div>
<div class="right">right</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
.middle-inner {
margin: 0 200px;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.left, .right, .middle {
width: 200px;
height: 200px;
float: left;
}
.middle {
width: 100%;
height: 200px;
background-color: red;
}
.left {
background-color: blue;
margin-left: -100%;
}
.right {
background-color: green;
margin-left: -200px;
}
最终效果：
image.png
3.(1) 平均布局（float）
类似淘宝上的这种就可以用平均布局来做
image.png
过程如下:
- 外层盒子固定宽度，子盒子浮动，父盒子清除浮动
- 子盒子用百分比宽度（尽量不要写死）
- margin通过calc计算属性计算得出
HTML
<div class="pictures clearfix">
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
</div>
CSS
.pictures {
width: 800px; /*外层盒子宽度定死*/
margin: 0 auto;
}
.picture {
width: 23.5%; /*每个小盒子百分比宽度*/
padding: 97px 0;
margin-left: calc(6% / 3); /*用calc计算剩余宽度*/
margin-top: 10px;
background: red;
float: left;
}
.picture:nth-child(4n+1) { /*最左边盒子不要margin*/
margin-left: 0;
}
.clearfix::after { /*解决float父级高度坍塌*/
content: '';
display: block;
clear: both;
}
最终效果
image.png
3.2 平均布局（flex）
flex布局就简单多了，过程如下：
- 外层盒子display: flex；flex-wrap: wrap；
- 内层盒子设定宽度和高度
- calc计算margin（建议不要用space-between）
CSS
.pictures {
width: 800px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.picture {
width: 23.5%;
padding: 97px 0;
margin-left: calc(6% / 3);
margin-top: 10px;
background: red;
float: left;
}
.picture:nth-child(4n+1) {
margin-left: 0;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
为何不要用justify-content: space-between?
因为如果用space-between，第二行删掉一个盒子后，是这样的。。。
image.png
