多列自適應布局

多列布局是從兩列布局引申出來的，所以我們先來看兩列布局

html結構如下所示：

class="parent">
class="left">
leftp>
div>
class="right">
r-leftp>
r-rightp>
div>
div>

這裡的left是定寬，right自適應

.left .right

我們需要變動一下上面的html結構，在right外套乙個div

class="parent">
class="left">
leftp>
div>
class="right-fix">
class="right">
r-leftp>
r-rightp>
div>
div>
div>

.right-fix .left .right

這裡我們讓right-fix右浮動，這時會使left和right-fix處於乙個層上。指定width:100%讓right充滿父元素，這時right-fix會在left的下方。所以我們需要再指乙個負的margin-left讓right-fix覆蓋在left上面。同時right指定margin-left抵消掉right-fix設定的負的margin。為了讓left顯示在最上面，需要給left指定乙個position: relative。真是夠麻煩的。。。

.left .right

給乙個塊元素設定了overflow: hidden會觸發該塊元素的bfc(block formating context)模式。在這裡，right塊就不會緊貼著它的父元素的左邊框了。所以它會和left左右依次排列。

- 優點：相容性好，只有ie6不支援。設定也比較簡單。

.parent .left, .right .left

這種方式採用了**布局。table-cell布局的元素會左右依次排列。

- 給parent設定width: 100%是因為預設**布局的寬度是子元素的寬度。

-table-layout屬性可以提高渲染速度，以布局優先的原則

- 由於table-cell布局的元素沒法設定margin，所以邊距需要設定padding

.parent .left .right

給right設定flex: 1是同時設定了flex-grow和flex-shrink都設定為1，這樣以達到自適應。

- 優點：設定簡單，容易理解

- 缺點：flex的相容問題，效能問題

html結構如下所示：

class="parent">
class="left">
leftp>
div>
class="center">
centerp>
div>
class="right">
rightp>
div>
div>

.left, .center .right

html結構如下所示：

class="parent">
class="left">
leftp>
div>
class="right">
rightp>
div>
div>

和定寬加自適應布局類似，不過這裡的left不知道寬度

不定寬+自適應布局可以由上面介紹的定寬+自適應布局引伸過來。這裡需要分析的地方使第二列的樣式是否與第一列的寬度有耦合性。分析如下：

-float+margin/float-fix兩種方法第二列需要設定margin，而margin的值是根據第一列的寬設定的，所以具有強耦合性，因而不能實現

- 同理float+overflow可以實現

-table布局可以實現，但同時需要注意

+.parent中去掉table-layout樣式。table-layout是布局優先，而現在是不定寬。

+left中新增width: 0.1%，設定此主要是為了相容性考慮

**如下:

.parent .left, .right .left

html結構如下所示：

class="parent">
class="left">
leftp>
div>
class="center">
centerp>
div>
class="right">
rightp>
div>
div>

.left,.center .right /* p的寬度即是內容的寬度 */ .left p,.center

p

.parent .left,.center,.right .left,.center .left p,.center

p

.parent .left,.center .right .left p,.center

p

多列自適應布局

兩列自適應布局

三列自適應布局

多textView自適應布局

多列自適應布局

兩列自適應布局

三列自適應布局

多textView自適應布局

相關推薦