關於雙飛翼布局的新的布法

2022-04-23 11:51:16 字數 731 閱讀 2738

之前看了雙飛翼布局,沒有理解他的意思,只知道要實現的效果是兩邊固定,中間可以縮放!但中間的內容不能被兩邊遮擋!!!

"en

">"

bd">

class="

main

">我是主體內容

class="

sub">我是左邊

class="

extra

">我是右邊

效果圖如下:

看了幾遍樣式,沒理解透,原諒我這麼低的智商!!!!

然後自己折騰了乙個方法:

**如下:

"en

">我是頭部

class="

content

">

class="

leftpart

">我是左邊

class="

rightpart

">我是左邊

效果如下圖:

具體的思想是左右兩邊固定定位,中間的部分不用管它,因為他們的父親body設定了左右padding!

以上僅僅是個人理解,有什麼錯誤的地方請大家多多指教!!不勝感激!!!!

關於聖杯 雙飛翼布局

一 聖杯布局 doctype html html head title 中間自適應 title style type text css container container div box2 box1 box3 style head body div class container div cla...

雙飛翼布局和聖杯布局的對比

先回顧一下 聖杯布局的實現過程 在不增加額外標籤的情況下,聖杯布局已經非常完美,聖杯布局使用了相對定位,以後布局是有侷限性的,而且寬度控制要改的地方也多,那麼有沒其他方法更加簡潔方便呢?在 ued 下,增加多乙個div就可以不用相對布局了,只用到了浮動和負邊距,這就是我們所說的雙飛翼布局。dom結構...

聖杯布局與雙飛翼布局的實現思路

主要為了理解思考的過程,而不是僅僅為了背過一段 1負邊距 margin left為負值,且兩個元素不在一行的時候 可以用元素float left,width 100 實現 margin left可以吃掉兄弟元素的margin.想像一下,假設width 99 右邊留一條縫隙,當margin left為...