今天學習了css的雙飛翼布局效果,就是一種利用margin-left, left, position=relative,float=left屬性,給web頁面三個元素設定位置的布局。因為像乙個大鳥的身體和兩邊的翅膀,故名「雙飛翼」。它和「聖杯」效果有些關聯,這裡,我們只給出雙飛翼效果的布局**。
當給乙個div設定margin-left值為-100%,float=left,且position=relative時,這個div就會頂到上面去。所以,這裡middle div在左邊,但是left div被頂到和middle div平級的位置。再設定一下middle div內容inner的margin left,就可以看似middle div在中間了。這是一節總結課。可以參考極客學院的視屏。
我是頭部
我是中間
hello,world!
hello,world!
hello,world!
hello,world!
hello,world!
hello,world!
hello,world!
hello,world!
我是左邊
我是右邊
我是尾部
效果如下:
css 雙飛翼布局
原理 1.三個盒子的都浮動 2.中間盒子套乙個盒子 父元素 width 100 鋪滿一行 3.左側盒子margin left 100 右側盒子margin right 右側盒子的寬度 px,這樣將三個哦盒子拉到一排上。4.中間盒子的子元素margin left 左側盒子的寬度,margin righ...
css雙飛翼布局
專業術語並非 無中生有 既然有這個說法,我想必定會有他的 與出處。於是,感覺告訴我要繼續。檢視眾多資料,總算是皇天不負有心人,終於找到了關於布局 雙飛燕 的這麼個說法。我暈,其實真正的術語並不叫 雙飛燕 而是 雙飛翼 估計是那哥們回帖的時候還在做夢吧 呵呵 開頭侃了半天,現在咱言歸正傳吧!雙飛翼布局...
CSS 聖杯 雙飛翼布局
html結構 123 123123 css container 把左右兩邊距離空出來 containercenter 設定widh為100 即充滿整個容器 center浮動 設定left,center,right左浮動。清除container浮動,保證後面的div正常布局 left,center,r...