今天小編介紹自適應布局實現方法的demo，

1)左側固定寬度，右側自適應，隨著窗口的寬度而變化；

2)右側固定寬度，左側自適應；

3)中間自適應，兩邊定寬

1、左定寬

用左側margin-left設為負寬度的方法，因為左側脫離文檔流，右側寬度設為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;

}

細節解釋：line-height等于height可以使文本上下居中，如果line-height超過height，以height為準

2、右定寬

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

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、中間自適應

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

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;

}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。