学习DIV+CSS网页布局之两列布局

时间：2021-05-08

DIV+CSS 网页布局第二篇：两列布局

1、宽度自适应两列布局

　　两列布局可以使用浮动来完成，左列设置左浮动，右列设置右浮动，这样就省的再设置外边距了。

　　当元素使用了浮动之后，会对周围的元素造成影响，那么就需要清除浮动，通常使用两种方法。可以给受到影响的元素设置 clear:both，即清除元素两侧的浮动，也可以设置具体清除哪一侧的浮动：clear:left 或 clear:right，但必须清楚的知道到底是哪一侧需要清除浮动的影响。也可以给浮动的父容器设置宽度，或者为 100%，同时设置 overflow:hidden，溢出隐藏也可以达到清除浮动的效果。

　　同理，两列宽度自适应，只需要将宽度按照百分比来设置，这样当浏览器窗口调整时，内容会根据窗口的大小，按照百分比来自动调节内容的大小。

XML/HTML Code复制内容到剪贴板

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>宽度自适应两列布局</title>

<style>

*{margin:0;padding:0;}

#herder{

height:50px;

background:blue;

}

.main-left{

width:30%;

height:800px;

background:red;

float:left;

}

.main-right{

width:70%;

height:800px;

background:pink;

float:right;

}

#footer{

clear:both;

height:50px;

background:gray;

}

</style>

</head>

<body>

<divid="herder">页头</div>

<divclass="main-left">左列</div>

<divclass="main-right">右列</div>

<divid="footer">页脚</div>

</body>

</html>

2、固定宽度两列布局

　　宽度自适应两列布局在网站中一般很少使用，最常使用的是固定宽度的两列布局。

　　要实现固定宽度的两列布局，也很简单，只需要把左右两列包裹起来，也就是给他们增加一个父容器，然后固定父容器的宽度，父容器的宽度固定了，那么这两列就可以设置具体的像素宽度了，这样就实现了固定宽度的两列布局。

XML/HTML Code复制内容到剪贴板

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>固定宽度两列布局</title>

<style>

*{margin:0;padding:0;}

#herder{

height:50px;

background:blue;

}

#main{

width:960px;

margin:0auto;

overflow:hidden;

}

#main.main-left{

width:288px;

height:800px;

background:red;

float:left;

}

#main.main-right{

width:672px;

height:800px;

background:pink;

float:right;

}

#footer{

width:960px;

height:50px;

background:gray;

margin:0auto;

}

</style>

</head>

<body>

<divid="herder">页头</div>

<divid="main">

<divclass="main-left">左列</div>

<divclass="main-right">右列</div>

</div>

<divid="footer">页脚</div>

</body>

</html>

3、两列居中自适应布局

　　同理，只需要给定父容器的宽度，然后让父容器水平居中。

XML/HTML Code复制内容到剪贴板

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>两列居中自适应布局</title>

<style>

*{margin:0;padding:0;}

#herder{

height:50px;

background:blue;

}

#main{

width:80%;

margin:0auto;

overflow:hidden;

}

#main.main-left{

width:20%;

height:800px;

background:red;

float:left;

}

#main.main-right{

width:80%;

height:800px;

background:pink;

float:right;

}

#footer{

width:80%;

height:50px;

background:gray;

margin:0auto;

}

</style>

</head>

<body>

<divid="herder">页头</div>

<divid="main">

<divclass="main-left">左列</div>

<divclass="main-right">右列</div>

</div>

<divid="footer">页脚</div>

</body>

</html>

4、固定宽度横向两列布局

　　和单列布局相同，可以把所有块包含在一个容器中，这样做方便设置，但增加了无意义的代码，固定宽度就是给定父容器的宽度，然后中间主体使用浮动。

XML/HTML Code复制内容到剪贴板

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>横向两列布局</title>

<style>

*{margin:0;padding:0;}

#warp{

width:960px;

margin:0auto;

margin-top:10px;

}

#herder{

height:50px;

background:blue;

}

#nav{

height:30px;

background:orange;

margin:10px0;

}

#main{

width:100%;

margin-bottom:10px;

overflow:hidden;

}

#main.main-left{

width:640px;

height:200px;

background:yellow;

float:left;

}

#main.main-right{

width:300px;

height:200px;

background:pink;

float:right;

}

#content{

width:100%;

overflow:hidden;

}

#content.content-left{

width:640px;

height:800px;

background:lightgreen;

float:left;

}

#content.content-right-sup{

width:300px;

height:500px;

background:lightblue;

float:right;

}

#content.content-right-sub{

width:300px;

height:240px;

background:purple;

margin-top:20px;

float:right;

}

#footer{

height:50px;

background:gray;

margin-top:10px;

}

</style>

</head>

<body>

<divid="warp">

<divid="herder">页头</div>

<divid="nav">导航</div>

<divid="main">

<divclass="main-left">左-上</div>

<divclass="main-right">右-上</div>

</div>

<divid="content">

<divclass="content-left">左-下</div>

<divclass="content-right-sup">右-上</div>

<divclass="content-right-sub">右-下</div>

</div>

<divid="footer">页脚</div>

</div>

</body>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：http://www.cnblogs.com/Mtime/p/5272414.html

学习DIV+CSS网页布局之两列布局

相关文章

学习DIV+CSS网页布局之混合布局

如何对网站代码进行SEO优化?

纯CSS实现的三列布局网页效果实例

DIV+CSS布局的优点和其所带来的视觉效果

企业网站设计DIV+CSS