在我們?nèi)粘ｉ_發(fā)中布局是我們必不可少的步驟，今天介紹日常開發(fā)中常見的幾種頁面布局方式跨嘉，如有錯誤川慌，歡迎指正，少廢話祠乃，直接上代碼梦重。
1：左邊定寬右邊不定寬
如圖：
1.png
html代碼
<div class="parent">
<div class="left">
<p>左邊固定寬度100px</p>
</div>
<div class="right">
<p>右邊寬度不固定</p>
<p>右邊寬度不固定</p>
</div>
</div>
css代碼一
.left{
width: 100px;
float: left;
}
.left p{
background:red;
}
.right{
margin-left: 120px;
}
.right p{
background: pink;
}
css代碼二
.left{
width: 100px;
float: left;
}
.left p{
background:red;
}
.right{
overflow: hidden;
}
.right p{
background: pink;
}
css代碼三
.parent{
display: table;
width: 100%;
table-layout: fixed;
}
.left,.right{
display: table-cell;
}
.left{width: 100px}
.left p{
background:red;
}
.right p{
background: pink;
}
css代碼四
.parent{
display: flex;
}
.left{
width: 100px;
margin-right: 20px;
background:red;
}
.right {
background: pink;
flex: 1
}
就先介紹這四種方式布局了 現(xiàn)代開發(fā)不考慮老版本瀏覽器兼容更多喜歡flex布局 ，尤其是移動端亮瓷，如果pc端考慮到兼容問題 則前面的比較合適
還有兩列定寬右邊不定寬 道理一樣 在此代碼上加就OK了
2：左右等高布局
如圖：
6.png
html代碼
<div class="parent">
<div class="left">
<p>我的高度跟隨右邊的高度</p>
</div>
<div class="right">
<p>右邊寬度不固定</p>
<p>右邊寬度不固定</p>
<p>右邊寬度不固定</p>
<p>右邊寬度不固定</p>
<p>右邊寬度不固定</p>
<p>右邊寬度不固定</p>
<p>右邊寬度不固定</p>
<p>右邊寬度不固定</p>
</div>
</div>
css代碼一
.parent{
display: table;
width: 100%;
table-layout: fixed;
}
.left,.right{
display: table-cell;
}
.left {
width: 100px;
background: red;
margin-right: 60px;
}
.right{
background: pink;
}
css代碼二
.parent{
display: flex;
}
.left {
width: 100px;
background: red;
margin-right: 20px;
}
.right{
flex: 1;
background: pink;
}
3：等寬布局
如圖：
3.png
html代碼
<div class="parent_flex">
<div class="parent">
<div class="column"><p>1</p></div>
<div class="column"><p>2</p></div>
<div class="column"><p>3</p></div>
<div class="column"><p>4</p></div>
</div>
</div>
css代碼一
.parent_flex{
margin-left: -20px;
}
.parent{
display: table;
width: 100%;
table-layout: fixed;
background: #ccc;
height: 200px;
}
.parent .column{
display: table-cell;
padding-left: 20px;
}
.parent .column p{
background: pink;
}
css代碼二
.parent{
width: 80%;
background: #ccc;
height: 300px;
display: flex;
margin:0 auto;
}
.parent .column{
height: 150px;
background: pink;
flex: 1;
}
.column+.column{
margin-left: 20px;
}
4：兩邊定寬中間不定寬
如圖：
8.png
html代碼：
<div class="parent">
<div class="left"><p>左邊</p></div>
<div class="right"><p>右邊</p></div>
<div class="center"><p>中間</p></div>
</div>
css代碼一
.parent{
width: 80%;
background: #ccc;
margin:0 auto;
}
.left{
width: 100px;
float: left;
margin-right: 10px;
background: red;
}
.right{
width: 100px;
float: right;
margin-left: 10px;
background: red;
}
.center{
overflow: hidden;
background: pink;
}
上面的寫法就是需要交換div center 的代碼放到后面 浮動的方式 來布局
下面用table或flex 就不需要
html代碼二
<div class="parent">
<div class="left"><p>左邊</p></div>
<div class="center"><p>中間</p></div>
<div class="right"><p>右邊</p></div>
</div>
css代碼一
.parent{
width: 100%;
background: #ccc;
margin:0 auto;
display: table;
table-layout: fixed;
}
.left{
width: 100px;
padding-right: 10px;
display: table-cell;
}
.right{
width: 100px;
padding-left: 10px;
display: table-cell;
}
.center{
display: table-cell;
}
p{
background: pink;
}
css代碼二
.parent{
width: 100%;
background: #ccc;
display: flex;
height: 200px;
}
.left,.right{
background: red;
width: 100px;
}
.left{
margin-right: 10px;
}
.right{
margin-left: 10px;
}
.center{
flex: 1;
background: pink;
}
看到這里琴拧，恭喜你2018年新的開始了，文章寫得比較簡單都是些基礎(chǔ)的知識嘱支，記得幫點(diǎn)個贊哦 艾蓝，如有問題可以留言 力崇！祝大家在新的一年2018 收獲多多，共同學(xué)習(xí)成長赢织。
