网页布局笔记2—基于浮动的布局
顾名思义,在基于浮动的布局中,只需设置希望定位的元素的宽度,然后将它们向左或向右浮动。因为浮动的元素不再占据文档流中的任何空间,它们就不再对包围它们的块框产生任何影响。为了解决这个问题,需要对布局中各个点上的浮动元素进行清理。非常常见的做法是,不对元素进行连续地浮动和清理,而是浮动几乎所有东西,然后在整个文档的“战略点”(比如页脚)上进行一次或两次清理。
1. 两列的浮动布局
在下面的示例中,(X)HTML由品牌区域、内容区域、主导航区域和最后的页脚组成。整个设计包围在一个容器 div 中,这个 div 使用前面介绍的方法之一进行水平居中:
<div id="wrapper">
<div id="branding">
...
</div>
<div id="content">
...
</div>
<div id="mainNav">
...
</div>
<div id="footer">
...
</div>
</div>
实现这个布局的 CSS 非常简单。只需为每个列设置想要的宽度,然后将导航向左浮动,将内容向右浮动:
#content {
width: 520px;
float: right;
}
#mainNav {
width: 180px;
float: left;
}
#footer {
clear: both;
}
为了确保页脚正确地定位在这两个浮动元素的下面,需要清理页脚。
2. 三列的浮动布局
创建三列布局所需的 HTML 与两列布局的 HTMLL 非常相似,唯一的差异是在内容 div 中添加了两个新的div: 一个用于主内容,另一个用于次要内容。
<div id="content">
<div id="mainContent">
mainContent
</div>
<div id="secondaryContent">
secondaryContent
</div>
</div>
只需设置想要的宽度,然后将主内容向左浮动,将次要内容向右浮动:
#mainContent {
width: 320px;
float: left;
}
#secondaryContent {
width: 180px;
float: right;
}
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。