如何實現三欄式布局

2021-07-11 04:52:35 字數 895 閱讀 5929

在解析度不同的情況下,使用流動性布局是乙個很好地選擇,本文介紹常見的幾種實現自適應的外部架構:

1.絕對定位

左右兩邊採用絕對定位的方式固定在兩側,中間部分利用margin來實現自適應寬度。

id="left">

div>

id="middle">

div>

id="right">

div>

#left

#right

#middle

2.margin負值

此方法需要首先對中間自適應部分外面加個容器,且容器的寬度設定為100%,然後對中間自適應部分兩側加margin實現寬度自適應。此容器和左側欄、右側欄絕需要設為浮動,且左側欄margin設為-100%,這樣剛好可以使其到容器的左側,右側欄的margin也設定為負值,其職即為右側欄的寬度的負值。

注意:中間外容器必須放在前面

id="container">

id="middle">

div>

div>

id="left">

div>

id="right">

div>

#container

#left

#right

#middle

3.自身浮動法

利用左右兩側欄的浮動將其固定在兩邊,然後對中間部分加margin使其做到自適應寬度。

注意:中間自適應部分需要放在最後

id="left">

div>

id="right">

div>

id="middle">

div>

#left

#right

#middle

三欄式布局

通常來說,三欄式最基本要解決的是左右兩側固定寬度,中間列自適應寬度,另外根據瀏覽器從上至下的渲染原理,通常中間欄才是最主要的內容,最好能在dom結構上將中間欄放在更前面 中間欄需要自適應寬度,自然想到塊級元素特性,但正因為這種獨佔一行的特性,只能將左右提前並且兩邊浮動,而中放最後做自適應寬度 另外就...

三欄式布局

真是坑壞我了.就因為html裡left,right,center的位置一直出錯 應該是left,right,center我寫成了left,center,right 團隊名稱 課程多數題目的解決方案都不是唯一的,這和我們在實際工作中的情況也是一致的。因此,我們的要求不僅僅是實現設計稿的效果,更是要多去...

三欄式布局

1 絕對定位法 這或許是三種方法裡最直觀,最容易理解的 左右兩欄採用絕對定位,分別固定於頁面的左右兩側,中間的主體欄用左右margin值撐開距離。於是實現了三欄自適應布局。絕對定位法下的css left,right left right content html 為 絕對定位法的html class...