css 宽带根据高度,CSS 布局简明教程－wrapper 无高度了

到目前为止，IE 中一切尚好，但 Firefox、Chrome 中会发现 wrapper 没有高度了，因为 sideCol 与 mainCol 间距之间没有红色背景。

要解决这个问题就是为 wrapper 增加一个 overflow:auto;。

运行一下示例

CSS 布局简明教程

.wrapper{overflow:auto;margin:auto;width:960px;background-color:#f00;color:#000;}

.sideCol{float:left;width:350px;background-color:#0f0;color:#000;}

.mainCol{float:left;display:inline;margin-left:10px;width:600px;background-color:#00f;color:#000;}

侧边栏

主要栏

[Ctrl+A 全部选择 提示：您可先修改部分代码，再按运行]

至此一个基本的 CSS 布局重点就完成了，总结一下核心代码：

DOCTYPE

CSS.wrapper{overflow:auto;margin:auto;width:960px;background-color:#f00;color:#000;}

.sideCol{float:left;width:350px;background-color:#0f0;color:#000;}

.mainCol{float:left;display:inline;margin-left:10px;width:600px;background-color:#00f;color:#000;}

再提炼一下核心：.wrapper{margin:auto;width:960px;overflow:auto;}

.col{float:left;display:inline;margin-left:10px;}

虽然 CSS 布局重点已经讲完，但实际操作中会遇到很多问题，这都是 IE 不兼容及我们对标准的不透彻理解造成的，请参阅千一网络的 CSS 栏目，以了解更多，http://www.itpow.com/docs/xhtmlcss/css/。