目錄
1. 兩欄布局
2. 左右定寬中間自適應(yīng)的三欄布局(圣杯、雙飛翼)
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) 圣杯布局
先構(gòu)建HTML代碼艇抠，將最重要的中間部分放最前面幕庐，最先渲染
<div class="wrapper clearfix">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
CSS方面，先將中間div設(shè)為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可以自適應(yīng)拉伸，但中間的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結(jié)構(gòu)狠角，三個div浮動号杠，給最外層div清除浮動
- 中間部分寬度100%，左右盒子定寬丰歌，給左右盒子設(shè)置負外邊距姨蟋，使其跑上來
- 接下來，圣杯布局采取左右盒子relative定位移位的方法立帖，而雙飛翼布局采用在middle盒子中套一個小div眼溶，給這個小div設(shè)置左右margin，達到左右定寬中間自適應(yīng)的效果厘惦。
貼代碼啦Ｍ捣隆Ａú尽！
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宗苍；
- 內(nèi)層盒子設(shè)定寬度和高度
- 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
