CSS之兩欄布局

2021-09-19 12:29:56 字數 1198 閱讀 7953

在頁面布局過程中，我們常常會要用到兩欄布局或者三欄布局，現在將兩欄布局的**總結如下：

1.一邊寬度固定，一邊自適應

2.一邊寬度不固定，一邊自適應

方法一：左側float:left;右側margin-left；

** html

左


右
css

*


.demo


.demo .left


.demo .right
效果圖：

方法二：絕對定位：

** html

左


右
css：

*


.demo


.demo .left


.demo .right
效果圖：

方法三：左邊float：left；右邊overflow：hidden；

** html

左


右
css：

*


.demo


.demo .left


.demo .right
效果圖：

方法四：利用彈性布局：

html：

左


右
css：

*


.demo


.demo .left


.demo .right
效果圖：

CSS布局 兩欄布局

題外話 心情不好想虐虐自己。兩欄布局要求說明 左側固定寬度，右側自適應大小 html文件結構如下 這是左邊 這是右邊 實現效果 方法如下 方法一 float。left將元素的float屬性設定為left body left right margin 0 padding 0 height 100 ba...

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

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

css常用布局 兩欄 三欄 布局

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