頁面常用的三欄布局與兩欄布局

2021-10-23 22:18:29 字數 605 閱讀 6135

"cantainer"

>

"left"

>

"right"

>

"cantainer"

>

"left"

>

"right"

>

將父元素設定為position:relative.

左邊元素:position:absolute;

left:0;

top:0;

右邊元素:positon:absolute;

right:0;

top:0;

中間元素:margin-left:左邊元素的寬度;

margin-right:右邊元素的寬度

將左邊元素設定為左浮動:float:left;

將右邊元素設定為右浮動:float:right;

中間元素:margin-left:左邊元素的寬度;

margin-right:右邊元素的寬度.

中間元素會自動居中

注意的是:html中,中間元素必須寫在最後!否則不能居中

三欄布局與兩欄布局

html 左邊定寬div 右邊自適應,前端前端前端前端前端前端前端前端前端前端div 1.left right 2.left right 3.left right 1.聖杯布局 class container class middle 中間div class left 左側div class rig...

兩欄布局與三欄布局

一 兩欄布局 left 左邊定寬 div right 右邊自適應,前端前端前端前端前端前端前端前端前端前端 div 1 left right2 left right3 left right二 三欄布局,中間自適應 container middle 中間 div left 左側 div right 右...

css常用布局 兩欄 三欄 布局

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