CSS兩列布局

2021-07-02 23:50:36 字數 981 閱讀 5854

在布局中，我們常常需要出現兩列的情況，其中左邊一列固定寬度，右邊一列隨著瀏覽器寬度變化而變化。如何實現呢？

傳統的方法是利用float將左部分浮動起來，再通過margin將右部分右移，得到所需效果，**如下：
css**如下：

.color-blue 


.color-yellow 


.background-color-blue 


.background-color-black 


.background-color-red 


.background-color-yellow 


.height-60 


.border-color-red 


.left 


.right 


.font-size-20


.line-height-1_5


.width-1 


.width-auto 


.width-300 


.width-960 


.width-100 


.inline-block 


/*第一種水平居中方式*/


.center-1 


/*第二種水平居中方式*/


.center-2 


.margin-left-301
這樣就可以得到所想要的效果，如圖：

在css3推出的盒布局中，可以使用更加簡便的方法來更加靈活的控制這樣的布局需求，就是利用了box-flex屬性，**如下：
其中css**如下：

.box 


.flex
該程式完整**位置：

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布局之兩列布局

兩列布局兩列布局一般情況下是指定寬與自適應布局，兩列中左列是確定的寬度，右列是自動填滿剩餘所有空間的一種布局效果 左列自適應,右列定寬 方案一 float margin 屬性實現 left right inner 優點 實現方式簡單 缺點 自適應元素 margin 屬性值需要與定寬元素的 width...

兩列布局 多列布局

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