网页布局笔记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;

           }

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。