前面已經介紹過單列定寬單列自適應的兩列布局，而兩列自適應布局是指一列由內容撐開，另一列撐滿剩餘寬度的布局方式。本文將從float、table和flex來介紹兩列自適應布局的3種思路。
在單列定寬單列自適應的兩列布局中，經常用float和負margin配合實現布局效果。但由於margin取值只能是固定值，所以在兩列都是自適應的布局中就不再適用。而float和overflow配合可實現兩列自適應效果。使用overflow屬性來觸發bfc，來阻止浮動造成的文字環繞效果。由於設定overflow:hidden並不會觸發ie6-瀏覽器的haslayout屬性，所以需要設定zoom:1來相容ie6-瀏覽器
<style
>
p.parent
.left
.right
style
>
<若table元素不設定table-layout:fixed，則寬度由內容撐開。在某個table-cell元素的外層巢狀一層div，並設定足夠小的寬度如width:0.1%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
>
p.parent
.leftwrap
.left
.right
style
>
<flex彈性盒模型是非常強大的布局方式。基本上，一般的布局方式都可以實現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>
[注意]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>
兩列自適應布局的4種思路
前面已經介紹過單列定寬單列自適應的兩列布局，而兩列自適應布局是指一列由內容撐開，另一列撐滿剩餘寬度的布局方式。本文將從float table flex和grid來介紹兩列自適應布局的4種思路 style p.parent left right style div class parent style...
兩列自適應布局的4種思路
前面已經介紹過單列定寬單列自適應的兩列布局，而兩列自適應布局是指一列由內容撐開，另一列撐滿剩餘寬度的布局方式。本文將從float table flex和grid來介紹兩列自適應布局的4種思路 style p.parent left right style div class parent style...
兩列自適應布局
要求 1 兩個盒子在同一行 2 右邊的盒子需要佔滿剩下的空間 3 兩個盒子不能重疊 方式一 左側欄寬度不固定 兩列自適應布局title html,body wrap header container 父元素新增偽元素樣式清除浮動，處理float的子元素無法撐開父元素高度問題 clearfix aft...