DIV+CSS布局

来源：互联网发布：网络高等学历教育编辑：程序博客网时间：2024/05/21 14:00

DIV+CSS布局

Float:

Float属性是DIV+CSS布局中最基本也是最常用的属性，用于实现多列功能，<div>标签默认一行只能显示一个，而使用Float属性可以实现一行显示多个div的功能，能实现表格布局的多列功能。

Clear:

使用Float属性设置一行有多个DIV后（多列），最好在下一行开始之前使用Clear属性清楚一下浮动，否则上面的布局会影响到下面。

实例：

一、经典布局——头尾固定高度，中间高度自适应

要求：

1、头部固定高度，宽度100%自适应父容器；

2、底部固定高度，宽度100%自适应父容器；

3、中间是主体部分，自动填满，浏览器可视区域剩余部分，内容超出则中间部分出现流动条；

4、整个内容填满浏览器可视区域，并且不超出此区域！

效果图：

方法：用position:absolute定位，头部和尾部高度固定，中间主体部分自适应高度。

主体部分内容超出可视区，用overflow:auto处理。

#header {

height:100px;

width:100%;

position:absolute;

top:0;

}

#footer{

position:absolute;

bottom:0;

height:100px;

width:100%;

}

#main {

position:absolute;

top:100px;

bottom:100px;

width:100%;

overflow:auto;

}

注意：当容器被position:absolute或者float:left or right的时候，在没有设定宽度的情况下窗口的表现为紧贴内容。

二、两栏式布局——右部定宽，左部自适应宽度

效果：

方法：

#content-Right{

width: 200px;

height: 300px;

background-color: #eee;

position: absolute;

margin: 20px;

top: 0px;

right: 0px;

}

#content-Main{

background-color: #999;

margin: 20px;

margin-right: 240px;

height: 200px;

}

右部分利用position:absolute定位，左部分利用margin-right限制即可

二、两栏式布局——左部定宽，右部自适应宽度

方法：

#content-Left{

margin: 20px;

width: 200px;

height: 300px;

}

#content-Right{

height: 200px;

position: absolute;

top: 20px;

left: 240px;

width: 100%;

}

三、三栏式布局——左右定宽，中间自适应宽度

效果：

方法：

<body>

<div class="right">RIGHT</div>

</body>

*{ margin:0; padding:0;}

.right,.left{

height:300px;

width:200px;

}

.right{

position:absolute;

right:0;

background:#ccc;}

.left{

position:absolute;

left:0;

background:#999;}

.main{

margin-right:200px;

background:#F60;

height:300px;

margin-left:200px;}

注意:此种方法要求body中div class=”main”在左右div之后。body中div的顺序影响结果。

若：将div class=”main”放在左右div之前，结果变为如下：

<body>

<div class="right">RIGHT</div>

</body>

0 0