常用的佈局方式
阿新 • • 發佈:2018-12-12
常用的佈局方式
1)兩列布局、左邊固定、右側自適應
第一種實現方式:把左邊的寬高寫死,右邊的div用相對定位定位過去,把左側的div的位置讓出來
<div class="box1"></div>
<div class="box2"></div>
.box1 {
width: 200px;
height: 400px;
background: #ff5d00;
}
.box2 {
height : 400px;
background: green;
position: relative;
left: 202px;
top: -400px;
}
第二種實現方式:div1可以用浮動或者絕對定位,使其脫離文件流,然後div2就會被蓋住了,然後為div2設定一個margin-right,讓其自己漏出來
<div class="box1"></div>
<div class="box2"></div>
.box1 {
width: 200px;
height: 400px;
background: #ff5d00;
/*float: left;*/
position: absolute;
}
.box2 {
height: 400px;
background: green;
margin-left: 202px;
}
2)三列布局、左右固定、中間自適應
左右的div寬高寫死,一個左浮動,一個右浮動,中間的不設定寬度,然後設一個左右外邊距,讓自己露出來,要不有一部分就蓋在了下面
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
.left , .right {
width: 200px;
height: 400px;
background: #ff5d00;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
height: 400px;
background: green;
margin: 0 202px;
}
3)三列布局、頭尾固定、中間自適應(手機常用的佈局)
把header和footer都固定定位,一個top設為0,另一個bottom設為0
中間的div設為絕對定位,然後把top和bottom讓出來,防止蓋住,left和right都設為0,這樣就伸開了。
為了使中間的內容有滾動條,中間的div加一個overflow: scroll
<div class="header">header</div>
<div class="content">
content <br>
content <br>
...
...
</div>
<div class="footer">footer</div>
.header , .footer {
height: 30px;
background: #ff0000;
width: 100%;
position: fixed;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
.content {
background: #cccccc;
position: absolute;
top: 30px;
bottom: 30px;
left: 0;
right: 0;
overflow: scroll;
}