关闭

DIV布局之三行三列左右两栏固定中间自适应

标签: divxhtmllayoutfloathtmlborder
1642人阅读 评论(2) 收藏 举报
分类:

忙了2个星期,终于有时间整理出下面这篇文章了,呵呵。

这个布局其实是在之前两个layout上的一个延伸,做了之前两个,再做一个这样的layout应该不会有什么问题滴,手法都差不多。

要使宽度会自适应,顾名思义,就是宽度是不固定的,随外容器变化而变化。而在使用div布局上,就有这么一个优点,div是自动适应容器宽度的。而我们这里要注意的问题仅仅是如何让左右两栏始终固定在原位置,简单点的方法当然就是用float浮动,可以看下面例子:

演示地址:http://www.doyoe.com/model/xhtmlcss/layout/3.htm

CSS部分:

body {
 font-family: Verdana, Arial;
 margin: 0;
 font-size: 12px;
}
#dyhead {
 margin-bottom: 5px;
 }
#dyleft {
 float: left;
 width: 200px;
 }
#dycenter {
 margin: 0 210px;
}
#dyright {
 float: right;
 width: 200px;
}
#dyfoot {
 margin-top: 5px;
 clear: both;
}
div {
 background-color: #eee;
 border: dotted 1px green;
}

先写#dyleft和#dyright两栏,避免#dycenter自动断行

XHTML部分:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
<title>Css Layout</title>
</head>
<body>
<div id="dyhead">头部(3列布局,左右两栏宽度固定,中间栏自适应宽度)</div>
<div id="dyleft">左栏固定宽度为200px</div>
<div id="dyright">右栏固定宽度为200px</div>
<div id="dycenter">中间自适应宽度</div>
<div id="dyfoot">底部</div>
</body>
</html>

希望有更多更好的layout经验的朋友多交流交流^_^

 原文地址:http://blog.doyoe.com/article.asp?id=11
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:48462次
    • 积分:1001
    • 等级:
    • 排名:千里之外
    • 原创:47篇
    • 转载:0篇
    • 译文:0篇
    • 评论:9条
    文章分类
    最新评论
    飘零雾雨的相关链接