CSS兩列布局

2021-07-23 18:05:41 字數 729 閱讀 9650

兩列布局（一列定寬，一列自適應，列等高）

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是自動的兩列自動等高）

1 .parent


12     .left


20     .right
2 使用flex進行兩列布局（一列定寬，一列自適應，列等高），flex的align-item屬性預設值是stretch.

1 .parent


9     .left


14     .right
3.使用float（偽等高）

1 .parent


9     .left,.right


/*等高*/


13     .left


20     .right
注：原文出自

CSS兩列布局

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

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...