CSS布局 兩欄布局

2021-08-14 23:42:46 字數 1231 閱讀 1677

題外話：心情不好想虐虐自己。

兩欄布局要求說明：左側固定寬度，右側自適應大小

html文件結構如下：

這是左邊


這是右邊
實現效果：

方法如下：

方法一：float。left將元素的float屬性設定為left

body


.left


.right


margin:0;


padding:0;


/*height:100%;*/


background:#dcdcdc;


}.left


.right
方法二：float+margin-left。設定左元素float屬性為left，有元素的margin-left為左元素的width

body


.left


.right
方法三：float+overflow：hidden。左元素float屬性設定為left，右元素overflow屬性設定為hidden

body


.left


.right
方法四：padding+絕對定位。左元素position屬性設定為absolute，右元素padding-left設定為左元素的width：

body


.left


.right


}


.right
總結：

（1）上述大部分的方法都是建立bfc來解決問題的。在bfc中，每個盒子的左外邊框緊挨著包含塊的右邊框。當我們給右側的元素單獨建立乙個bfc時，它將不會緊貼在包含塊的左邊框，而是緊貼在左元素的右邊框。

（2）建立bfc的方法：

a.float屬性不為none

b.position屬性為絕對屬性absolute或fixed

c.overflow屬性不為visible

d.display屬性為inline-block，table-caption，flex，inline-flex

CSS實現 兩欄布局，三欄布局

aside div main div div aside main 左側欄固定寬度向左浮動，右側主要內容則用margin left留出左側欄的寬度，預設寬度為auto，自動填滿剩下的寬度。右側固定寬度，左側自適應則是同理，只要將固定欄右浮動，使用margin right空出其寬度即可。aside d...

css常用布局 兩欄 三欄 布局

我們在做pc端頁面的時候 經常會用到這種布局 即兩欄 三欄布局。如圖所示 這兩種經典布局相信很多人都用過把。現在分享一下我的布局方案吧 每個人布局風格不同 自然想法就不一樣了。側邊使用 float left屬性 中間盒子自動尾隨 其後設定margin left 200px 實現對齊。2 使用 絕對定...

CSS之兩欄布局

在頁面布局過程中，我們常常會要用到兩欄布局或者三欄布局，現在將兩欄布局的 總結如下 1.一邊寬度固定，一邊自適應 2.一邊寬度不固定，一邊自適應 方法一 左側float left 右側margin left html 左 右css demo demo left demo right 效果圖 方法二 ...