响应式布局之浮动圣杯布局（双飞翼布局）—-自适应宽度布局

Posted 2020-10-08 mythp

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了响应式布局之浮动圣杯布局（双飞翼布局）—-自适应宽度布局相关的知识，希望对你有一定的参考价值。

前端开发中自适应布局在实际应用中越来越普遍，特别是随着更多高级浏览器的出现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>