響應式布局之浮動聖杯布局（雙飛翼布局）—-自適應寬度布局
阿新 • • 發佈：2017-09-25
由於 部分 gin asi 禁用 代碼 寬度 sof cin
前端開發中自適應布局在實際應用中越來越普遍，特別是隨著更多高級瀏覽器的出現html5和css3得到了更好的應用。
聖杯布局有個好處，完全符合前端開發中漸進增強的理念，由於瀏覽器解析是從DOM的上至下，這樣聖杯布局可以把頁面中重要的內容section放到DOM前面先解析，而次要的aside內容則放在DOM後面後解析。
下面的demo能夠解決實際應用中絕大多數的自適應布局問題了，有興趣的coder們可以研究下，代碼如下：
左邊固定，右邊自適應(雙飛翼布局的實現)：demoA html部分：
contentaside
demoA css部分：
.wrap{ width:100%; float:left}
.content{ height:300px;background:green; margin-left:200px}
.right{ width:200px; height:300px; background:red; float:left; margin-left:-100%}
左邊和右邊固定，中間自適應(雙飛翼布局的實現)：demoB html部分：
contentasideaside
demoB css部分：
.wrap{ width:100%; float:left}
.content{ height:300px;background:green; margin-left:200px;margin-right:200px}
.left{ width:200px; height:300px; float:left; background:yellow; margin-left:-100%}
.right{ width:200px; height:300px; background:red; float:left; margin-left:-200px}
設置head的內容：
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
HTML禁用緩存問題?
打開郵箱
mailto:
[email protected]">打開郵箱
打開QQ
http://wpa.qq.com/msgrd?v=3&uin=1018829833&site=qq&menu=yes
">打開QQ
?
響應式布局之浮動聖杯布局（雙飛翼布局）—-自適應寬度布局