響應式佈局之浮動聖盃佈局（雙飛翼佈局）—-自適應寬度佈局

時間 2019-11-29

標籤響應佈局浮動雙飛自適應寬度欄目 CSS 简体版

原文原文鏈接

前端開發中自適應佈局在實際應用中愈來愈廣泛，特別是隨着更多高級瀏覽器的出現html5和css3獲得了更好的應用。css

聖盃佈局有個好處，徹底符合前端開發中漸進加強的理念，因爲瀏覽器解析是從DOM的上至下，這樣聖盃佈局能夠把頁面中重要的內容section放到DOM前面先解析，而次要的aside內容則放在DOM後面後解析。html

下面的demo可以解決實際應用中絕大多數的自適應佈局問題了，有興趣的coder們能夠研究下，代碼以下：前端

左邊固定，右邊自適應(雙飛翼佈局的實現)：demoA html部分：html5

        contentaside

demoA css部分：css3

.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部分：web

        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>ide

<meta http-equiv="pragma" content="no-cache"> 佈局

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

</head>