CSS簡單實現聖杯布局和雙飛翼布局

①如何使用css變數 ②實現聖杯布局和雙飛翼的簡單思路 ③了解浮動和margin的特性

:root

class

="holygrail"
>
class
="hg_main"
>
maindiv
>
class
="hg_left"
>
leftdiv
>
class
="hg_right"
>
rightdiv
>
div>

.holygrail

.hg_main
.hg_left
.hg_right

class

="doublewing"
>
class
="dw_main"
>
class
="dw_con"
>
maindiv
>
div>
class
="dw_left"
>
leftdiv
>
class
="dw_right"
>
rightdiv
>
div>

.doublewing

.dw_left
.dw_main
.dw_con
.dw_right

雙飛翼布局布局

優點缺點

聖杯無多餘dom

當中間的寬度小於左右的寬度時，結構混亂

雙飛翼可以支援各種寬度，通用性強較強

需要多加一層dom

如果感覺對您的學習工作有幫助，請將它分享給需要的人，或者點讚鼓勵一下，感謝支援

你可以加個收藏，我還會不斷更新。。。

CSS 聖杯 雙飛翼布局

html結構 123 123123 css container 把左右兩邊距離空出來 containercenter 設定widh為100 即充滿整個容器 center浮動 設定left，center，right左浮動。清除container浮動，保證後面的div正常布局 left,center,r...

CSS聖杯和雙飛翼布局

聖杯布局參考 利用flex 脫離文件流，利用 padding 預留出位置，利用 margin left 實現布局，利用 position 和left right 填充位置，好處是 優先渲染主要 dom,main 部分是自適應寬度的，很容易在定寬布局和流體布局中切換等。雙飛翼布局 利用flex 脫離文...

css聖杯布局和雙飛翼布局

一，聖杯布局跟雙飛翼布局的實現，目的都是左右兩欄固定寬度，中間部分自適應。方法一，聖杯布局 實現效果 左邊固定寬度200px,右邊固定寬度300px,中間自適應。實現方法 主體部分三個子元素都設定浮動，左邊子元素設定margin left 100 右邊子元素設定margin left 200px h...