我正在从
HTML表格转换到纯CSS布局.到目前为止,一件事情就是如何正确布局页面.
我可以：
所以这样：
________________________ | Header | |_______________________| | Left | Content | | Nav | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |______|________________| | Footer | |_______________________|
但是,在某些页面上,我希望能够将“内容”区域划分为以下内容：
________________________ | Header | |_______________________| | Left | info | info | | Nav | | | | | | | | | | | | | | | | |______|_________| | | Other info | | | | | | | | | | | | | |______|________________| | Footer | |_______________________|
任何人都知道这样做会怎样？甚至是一个很好的网站,帮助这种事情？
解决方法
第一个布局预览(
online demo)：
HTML：
<div id="header">Header</div>
<div id="main-wrap">
<div id="sidebar">Left Nav</div>
<div id="content-wrap">Content</div>
</div>
<div id="footer">Footer</div>
CSS：
/* sizes */
#main-wrap > div { min-height: 450px; }
#header,#footer {
min-height: 40px;
}
/* layout */
#main-wrap {
/* overflow to handle inner floating block */
overflow: hidden;
}
#sidebar {
float: left;
width: 30%;
}
#content-wrap {
float: right;
width: 70%;
}
第二布局预览(online demo)：
html与第一个布局非常相似,但是我们包含一个包装器到#content-wrap：
<div id="header">Header</div>
<div id="main-wrap">
<div id="sidebar">Left Nav</div>
<div id="content-wrap">
<div id="info-wrap">
<div class="info">small info </div>
<div class="info">small info</div>
</div>
Content
</div>
</div>
<div id="footer">Footer</div>
css也是类似的,我们通过添加一些CSS规则来定位新的div：
/* sizes */
#main-wrap > div { min-height: 450px; }
#header,#footer {
min-height: 40px;
}
.info { min-height: 80px; }
/* layout */
#main-wrap {
/* overflow to handle inner floating block */
overflow: hidden;
}
#sidebar {
float: left;
width: 30%;
}
#content-wrap {
float: right;
width: 70%;
}
#info-wrap {
/* overflow to handle inner floating block */
overflow: hidden;
}
.info {
width: 50%;
float: left;
}
更新：改进样式
