今天小編介紹自適應(yīng)布局實現(xiàn)方法的demo，

1)左側(cè)固定寬度，右側(cè)自適應(yīng)，隨著窗口的寬度而變化；

2)右側(cè)固定寬度，左側(cè)自適應(yīng)；

3)中間自適應(yīng)，兩邊定寬

1、左定寬

用左側(cè)margin-left設(shè)為負寬度的方法，因為左側(cè)脫離文檔流，右側(cè)寬度設(shè)為100%

效果如下：

left.png

代碼如下：

.head{

display: block;

text-align: center;

line-height: 50px;

height: 40px;

background-color: yellow;

color: purple;

}

.body{

display: block;

height: 400px;

width: 100%;

}

.left{

float: left;

width: 100px;

height: 100%;

background-color: pink;

margin-right: -100px;

}

.right{

height: 100%;

width: 100%;

color: white;

background-color: lightblue;

float: left;

margin-left: 100px;

}

.foot{

display: block;

width: 100%;

height: 40px;

background-color: yellow;

text-align: center;

}

細節(jié)解釋：line-height等于height可以使文本上下居中，如果line-height超過height，以height為準(zhǔn)

2、右定寬

仍然采用margin方法，但這里有一個瑕疵，左側(cè)的部分會被遮擋

right.png

.right{

float: right;

width: 100px;

height: 100%;

background-color: pink;

margin-left: -100px;

}

.left{

height: 100%;

width: 100%;

color: white;

background-color: lightblue;

float: left;

}

3、中間自適應(yīng)

實現(xiàn)方法是，左右兩邊浮動，且在html中先寫左右標(biāo)簽，后寫中間標(biāo)簽，利用瀏覽器從上到下解析html標(biāo)簽的特點

middle.png

.body{

display: block;

height: 400px;

width: 100%;

}

.left{

height: 100%;

float: left;

width: 100px;

background-color: pink;

}

.middle{

background-color: lightblue;

height: 100%;

}

.right{

height: 100%;

float: right;

width: 100px;

background-color: lightgreen;

}

總結(jié)

以上是生活随笔為你收集整理的css什么是自适应布局,CSS自适应布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。