等高布局 詳解

2021-09-25 08:45:49 字數 1214 閱讀 3064

3:等高布局

height:auto時的現象

height:auto 全部都是內容撐開

每一列盒子高度同時變化,以最高的那列為基準 整個盒子的高度應該取決於最高的那列

3:真等高—>背景盒子法

原理:父盒子取決於內容盒子裡最高的盒子的高度

1.多列浮動併排 清除浮動影響

2.給最外側的盒子再套幾個盒子 套的盒子數量 =列的數量(每一列都要分配乙個背景盒子)

class

="c"

>

class

="b"

>

class

="a"

>

class

="left"

>

左側div

>

class

="center"

>

中間div

>

class

="right"

>

右側div

>

div>

div>

div>

三個小盒子 width設定相同 width:100%;

3.先移動倒數第二層的盒子, 然後依次移動倒數 第三層…

設定負外邊距移動

.a.b.c

4.移動相應的列到相應的背景盒子 通過相對定位正值 第乙個移動的 向右移動的是第三列+第二列的寬度…

缺點:需要巢狀多個標籤 結構略微複雜 理解也比較困難

優點:真的等高,相容性較好

全部**:

偽等高布局

偽等高布局title charset utf 8 name viewport content width device width initial scale 1.0 type text css container box1 box2 box1 box2 clearfix after box3 bo...

CSS等高布局

做一些後台專案,和一下帶側邊欄專案的時候登高布局很常用,總結了下有幾種 1.margin bottom方法 這裡直接介紹我認為的最佳的側邊欄 分欄高度自動相等方法。核心的css 如下 數值不固定 margin bottom 3000px padding bottom 3000px 再配合父標籤的ov...

多種等高布局

靜態布局 流式布局 自適應布局 響應式布局 彈性布局 一 靜態布局 頁上的所有元素的尺寸一律使用px作為單位 1.布局特點 不管瀏覽器尺寸具體是多少,網頁布局始終按照最初寫 時的布局來顯示。常規的pc的 都是靜態 定寬度 布局的,也就是設定了min width,這樣的話,如果小於這個寬度就會出現滾動...