前言

本篇文章將介頁面布局中的自適應布局，常見的自適應布局有以下2種：左列固定右列自適應、左右兩列固定中間自適應。

?

1. 左列固定右列自適應布局方案

說明：左列固定右列自適應，也可以為右列固定左列自適應，常見于中臺管理界面、移動端Web的列表展示等等。

<div class="container"><div class="left">固定寬度</div><div class="right">自適應</div> </div>

?

1.1 子元素 float:left

說明：左邊的固定列設置為 float:left，右邊的自適應列設置為 float:none。

CSS：

* { margin: 0;padding: 0 }.container {position: absolute;width: 100%;height: 100%; } .left {float: left;width: 200px;height: 100%;background-color: #72e4a0; }.right {float: none;width: 100%;height: 100%;background-color: #9dc3e6; }

?

1.2 子元素 width:calc()

說明：自適應列的width根據calc()自動計算，如：父容器width - 固定列width。

瀏覽器支持：IE 9 。

CSS：

* { margin: 0;padding: 0 }.container {position: absolute;width: 100%;height: 100%; }.left {float: left;width: 200px;height: 100%;background-color: #72e4a0; }.right {float: left;width: calc(100% - 200px);height: 100%;background-color: #9dc3e6; }

　　

?

1.3?父元素?display: table

說明：父容器采用display: table和table-layout: fixed時，子容器會平分父容器的寬度，這時候固定某列的width，其余的列會繼續平分剩下的寬度。

瀏覽器支持：IE 8 。

CSS：

* { margin: 0;padding: 0 }.container {position: absolute;display: table;width: 100%;height: 100%;table-layout: fixed; }.left {display: table-cell;width: 200px;height: 100%;background-color: #72e4a0; }.right {display: table-cell;width: 100%;height: 100%;background-color: #9dc3e6; }

?

1.4 父元素?display: flex

瀏覽器支持：IE 10 。

CSS：

* { margin: 0;padding: 0 }.container {position: absolute;display: flex;width: 100%;height: 100%; }.left {width: 200px;height: 100%;background-color: #72e4a0; }.right {flex: 1;height: 100%;background-color: #9dc3e6; }

?

2. 左右2列固定，中間自適應

<div class="container"><div class="left">左側定寬</div><div class="mid">中間自適應</div><div class="right">右側定寬</div> </div>

?

2.1 子元素 width:calc()

說明：自適應列的width根據calc()自動計算，如：父容器width - 固定列width。

瀏覽器支持：IE 9 。

CSS：

* { margin: 0;padding: 0 }.container {position: absolute;width: 100%;height: 100%; }.left {float: left;width: 100px;height: 100%;background-color: #72e4a0; }.mid {float: left;width: calc(100% - 100px - 100px);height: 100%;background-color: #9dc3e6; }.right {float: left;width: 100px;height: 100%;background-color: #4eb3b9; }

?

?

2.2 父元素?display: flex

說明：在父元素設置display為flex時，其中一列的flex為1，其余列都設置固定width。

瀏覽器支持：IE 10 。

CSS：

* { margin: 0;padding: 0 }.container {position: absolute;display: flex;width: 100%;height: 100%; }.left {float: left;width: 100px;height: 100%;background-color: #72e4a0; }.mid {float: left;height: 100%;flex: 1;background-color: #9dc3e6; }.right {float: left;width: 100px;height: 100%;background-color: #4eb3b9; }

　　

?

End Web開發之路系列文章 菜單加載中...

總結

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

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