div+css三栏自适应宽度简单布局学习实例

常说的三栏布局主要是由#header、中间三栏、#Footer三大部分组成。中间三栏占整个页面的宽度,分为#left、#middle、#right,左右主要放一些导航链接,中间放主要内容。
用绝对定位的方法实现固定宽度的三栏布局并不难,但是如果想让宽度随着显示器分辨率自适应就有点困难了。
基本方法

基本的布局包含五个div,即标题、页脚和三栏。标题和页脚占据整个页宽。左栏div和右栏div都是固定宽度的,并且用float属性来把它们挤压到浏览器窗口的左侧和右侧。中栏实际上占据了整个页宽,中栏的内容在左、右两栏之间“流淌”。由于中栏div的宽度并不固定,因此它可以根据浏览器窗口的改变进行必要的伸缩。中栏div的左侧和右侧的填充(padding)属性保证内容安排在一个整齐的栏中,甚至当它伸展到边栏(左栏或者右栏)的底端也是这样。
实例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="UTF-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>divcss三栏布局示例</title>
<style type="text/css">
body {
    margin: 0px;
    padding: 0px;
}
#header {
    clear: both;
    height: 50px;
    background-color: blue;
	margin:0px 5px 5px 5px;
    padding: 1px;
	color:white;
}
#left {
    float: left;
    width: 150px;
    background-color: red;
	margin:0px 5px;
}
#right {
    float: right;
    width: 150px;
    background-color: green;
	margin:0px 5px;
}
#middle {
    padding: 0px 160px 5px 160px;
    margin: 0px;
    background-color: silver;
    height:300px;
    margin:0px 5px;
}
#footer {
    clear: both;
    background-color: yellow;
    margin:5px 5px 0px 5px;
}
</style>
</head>

<body>
<div id="header">
    <h1>css三栏布局示例</h1>
</div>
<div id="left">
    #left----woaicss.com
</div>
<div id="right">
    Starboard side text...
</div>

<div id="middle">
    #Middle---woaicss.com
</div>

<div id="footer">
    #Footer---woaicss.com
</div>
</body>
</html>

代码说明

HTML代码中各部分出现的顺序是非常重要的。左栏和右栏div必须在中栏之前出现。这样才可以让这两个边栏浮动到它们的位置上(屏幕两侧),并让中栏的内容将“流”入它们之间的空间。如果浏览器在一个或者两个边栏div之前先发现中栏,那么中栏将占据屏幕的一侧或者两侧,这样浮动的部分就会跑到中栏的下面而不是中栏的旁边了。

在div#middle样式中,没有clear,申明允许中栏的内容“流淌”在两个边栏之间。padding:0px 160px 5px 160px申明设置了到左栏和右栏的填充,这样允许150象素宽度的栏div,在加上10象素的间距。

这是用float实现的三栏液态布局的简单实例。

点赞 (0)

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code