CSS布局之兩列布局

兩列布局

兩列布局一般情況下是指定寬與自適應布局，兩列中左列是確定的寬度，右列是自動填滿剩餘所有空間的一種布局效果；

左列自適應, 右列定寬

"left">
"right">
"inner">
優點：實現方式簡單
缺點：自適應元素 margin 屬性值需要與定寬元素的 width  屬性值保持一致；
定寬元素浮動與自適應元素不浮動導致瀏覽器相容性不好；
右列自適應元素中定義的了加 clear
:both 的子級元素會出問題；

具體方案如下：

給左邊乙個盒子設定左浮動(float:left;)，右邊的盒子套乙個 right-fix 並給 right-fix設定右浮動 float: right; 和自適應寬度 width: 100%;

讓 right-fix 這個盒子反向移動左盒子寬度的大小 margin-left:-400px;

給左盒子新增乙個相對定位，提高他的層級性，從而顯示出來

給右邊的子容器設定乙個 margin-left：400px；

lang
="en"
>
>
charset
="utf-8"
/>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
/>
>
documenttitle
>
>
.left
.right-fix
.right
style
>
head
>
>
class
="left"
>
div>
class
="right-fix"
>
class
="right"
>
div>
div>
body
>
html
>

具體的：

1.給左邊固定寬度盒子加浮動屬性float: left;

2.給右邊自適應寬度盒子加浮動屬性 overflow: hidden;;

"left">
"right">
優點: 簡單易用 全相容
缺點: overflow 屬性不僅解決了兩列布局問題，同時設定了內容溢位的情況；

給父元素設定display：table；

給子元素設定display：table-cell；

兩列布局解決方案4-table+table-celltitle

>

>

*#parent

#left

#right

style

>

head

>

>

"parent"

>

"left"

>

div>

"right"

>

div>

div>

body

>

html

>

優點: 瀏覽器相容比較好

缺點: 將所有元素的 display 屬性設定為 table 相關值，受到相應制約；方法四：使用絕對定位實現

1.給左邊盒子設定定位 

position: absolute;
top:0;
left:0;
2.給右邊的盒子設定
position: absolute;
top:0;
right:0;
left:400px;

"parent">
"left">
"right">

方案五：使用 flex 實現

1.給父元素設定display: flex;

2.給右邊自適應設定 flex:1;這相當於100%-左定寬

"parent">
"left">
"right">

方案六：使用 grid 實現

1.給父元素設定 display: grid;

2.去掉左右盒子的寬度並給父元素設定 grid-template-columns:400px auto;這表示左邊設定400寬度，右邊自適應。

"parent">
"left">
"right">

CSS兩列布局

在布局中，我們常常需要出現兩列的情況，其中左邊一列固定寬度，右邊一列隨著瀏覽器寬度變化而變化。如何實現呢？傳統的方法是利用float將左部分浮動起來，再通過margin將右部分右移，得到所需效果，如下 css 如下 color blue color yellow background color b...

CSS兩列布局

兩列布局 一列定寬，一列自適應，列等高 1class parent 2 class left 3 leftp 4 div 5 class right 6 rightp 7 rightp 8 div 9 div 1.用table table cell實現兩列布局 一列定寬，一列自適應，且table是自...

兩列布局 多列布局

用css html編寫乙個兩列布局的網頁，要求右側寬度為200px，左側自動擴充套件 container left div right div div 利用浮動float margin container left right利用彈性盒子來寫 container left right利用定位posi...