如图, header的height: 80px , side-bar的width: 200px, 别的均为不知, 该如何做出该布局呢??
在响应式布局的大前提下, 首先想到的就是flex布局吧:
?.header{ ???height: 80px; ???width: 100%; ???background-color: #654a8e; ?} ?.wrapper{ ???display: flex; ???width: 100%; ???height: 100%; ?} ?.side-bar{ ???flex: none; ???width: 200px; ???height: 100%; ???background-color:#3ad3cd; ???text-align: center; ?} ?.content{ ???flex: 1; ???height: 100%; ???width: 100%; ???background-color:#fd145e; ?}就是使用一个wrapper来包着除了header以外的内容, 定义样式 display: flex, 具体的就不赘述了。
当然, 也可以活用 max/min - width/height, 例如:
?.header{ ???height: 80px; ???width: 100%; ???background-color: #654a8e; ?} ?.wrapper{ ???display: flex; ???width: 100%; ???height: 100%; ?} ?.side-bar{ ???flex: 1; ???max-width: 200px; ???height: 100%; ???background-color:#3ad3cd; ???text-align: center; ?} ?.content{ ???flex: 1; ???height: 100%; ???width: 100%; ???background-color:#fd145e; ?}这样就可以得到一个弹性的 side-bar, 但最宽也只能是200px。
但为了照顾兼容性(flex低版本浏览器理所当然不兼容), 当然首选多年依赖CSS布局都离不开的浮动, float: left 啦!!
但是, 在给出的条件下, 应该哪个浮动, 还是都浮动呢??
下面都来试试:
首先让 side-bar 和 content 都左浮动
.header{ ???height: 80px; ???width: 100%; ???background-color: #654a8e; ?} ?.side-bar{ ???width: 200px; ???height: 100%; ???background-color:#3ad3cd; ???float: left; ???text-align: center; ?} ?.content{ ???height: 100%; ???width: 100%; ???background-color:#fd145e; ???float: left; ?}结果如下:
因为 content 的 width设置为100% 所以左浮后本该和 side-bar 同一行, 结果超过屏幕宽度后, 自动移到下一行了, 这也符合浮动的效果之一: 浮动的元素还会互相贴靠, 如果没有足够的空间贴靠, 则往浏览器边上靠。
接着试试只让 side-bar 浮动, 看有什么效果:
?.header{ ???height: 80px; ???width: 100%; ???background-color: #654a8e; ?} ?.side-bar{ ???width: 200px; ???height: 100%; ???background-color:#3ad3cd; ???float: left; ???text-align: center; ?} ?.content{ ???height: 100%; ???width: 100%; ???background-color:#fd145e; ?}结果正是我们需要的布局样式, 再看看浮动的定义: 使元素脱离标准流文档。
而这就是: 当排第一的块级因float脱离标准文档流后, 后一个块级会自以为是标准文档流中的第一个元素而顶上。
给content单独添加左浮, 效果和两个都左浮一样, 就算得到了正确布局还是要去试一试的, 万一手痒了呢。
CSS之简易盒子布局
原文地址：http://www.cnblogs.com/olivier17/p/7811357.html