兩列自適應布局的4種思路

前面已經介紹過單列定寬單列自適應的兩列布局，而兩列自適應布局是指一列由內容撐開，另一列撐滿剩餘寬度的布局方式。本文將從float、table、flex和grid來介紹兩列自適應布局的4種思路

<

style
>
p.parent
.left
.right
style
>

<

div 
class
="parent"
style
="background-color: lightgrey;"
>
<
div 
class
="left"
style
="background-color: lightblue;"
>
<
p>left
p>
div>
<
div 
class
="right"
style
="background-color: lightgreen;"
>
<
p>right
p>
<
p>right
p>
div>
div>

【思路二】table

若table元素不設定table-layout:fixed，則寬度由內容撐開。在某個table-cell元素的外層巢狀一層div，並設定足夠小的寬度如width:0.1%

<

style
>
p.parent
.leftwrap
.left
.right
style
>

<

div 
class
="parent"
style
="background-color: lightgrey;"
>
<
div 
class
="leftwrap"
style
="background-color: pink;"
>
<
div 
class
="left"
style
="background-color: lightblue;"
>
<
p>left
p>
div>
div>
<
div 
class
="right"
style
="background-color: lightgreen;"
>
<
p>right
p>
<
p>right
p>
div>
div>

【思路三】flex

flex彈性盒模型是非常強大的布局方式。基本上，一般的布局方式都可以實現

[注意]ie9-不支援

<

style
>
p.parent
.right
style
>

<

div 
class
="parent"
style
="background-color: lightgrey;"
>
<
div 
class
="left"
style
="background-color: lightblue;"
>
<
p>left
p>
div>
<
div 
class
="right"
style
="background-color: lightgreen;"
>
<
p>right
p>
<
p>right
p>
div>
div>

【思路四】grid

[注意]ie10-瀏覽器不支援 

<

style
>
p.parent
style
>

<

div 
class
="parent"
style
="background-color: lightgrey;"
>
<
div 
class
="left"
style
="background-color: lightblue;"
>
<
p>left
p>
div>
<
div 
class
="right"
style
="background-color: lightgreen;"
>
<
p>right
p>
<
p>right
p>
div>
div>

兩列自適應布局的4種思路

前面已經介紹過單列定寬單列自適應的兩列布局，而兩列自適應布局是指一列由內容撐開，另一列撐滿剩餘寬度的布局方式。本文將從float table flex和grid來介紹兩列自適應布局的4種思路 style p.parent left right style div class parent style...

兩列自適應布局的3種思路

前面已經介紹過單列定寬單列自適應的兩列布局，而兩列自適應布局是指一列由內容撐開，另一列撐滿剩餘寬度的布局方式。本文將從float table和flex來介紹兩列自適應布局的3種思路。在單列定寬單列自適應的兩列布局中，經常用float和負margin配合實現布局效果。但由於margin取值只能是固定值...

兩列自適應布局

要求 1 兩個盒子在同一行 2 右邊的盒子需要佔滿剩下的空間 3 兩個盒子不能重疊 方式一 左側欄寬度不固定 兩列自適應布局title html,body wrap header container 父元素新增偽元素樣式清除浮動，處理float的子元素無法撐開父元素高度問題 clearfix aft...