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

2021-09-28 16:42:38 字數 3304 閱讀 1468

前面已經介紹過單列定寬單列自適應的兩列布局,而兩列自適應布局是指一列由內容撐開,另一列撐滿剩餘寬度的布局方式。本文將從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>

style="width: 100%; height: 60px;" src="" frameborder="0" width="320" height="240">

【思路二】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>

style="width: 100%; height: 60px;" src="" frameborder="0" width="320" height="240">

【思路三】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>

style="width: 100%; height: 60px;" src="" frameborder="0" width="320" height="240">

【思路四】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>

style="width: 100%; height: 60px;" src="" frameborder="0" width="320" height="240">

更多專業前端知識,請上

【猿2048】www.mk2048.com

兩列自適應布局的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...