关闭

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

标签: divxhtmlfloathtmlbordercss
718人阅读 评论(0) 收藏 举报
分类:

和前一篇文章一样,只是这次调换了个位置。把之前的左栏固定变为了现在的右栏固定,实现的手法也是大同小异,不过有一个地方需要注意。

那就是在写HTML时,应该把右边的先写,然后再写左边。因为DIV的默认样式是block,每个div都会自动断行。如果先写左边,再写右边的话,因为左边没有float漂浮,右边的会在右部断行;所以编写时,先写右边,再写左边,右边是float的。

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

CSS部分:

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

和前一篇文章一样没有什么大的不同,只是#dyleft和#dyright互换了一下,#dyright里面的float值为right,漂浮在右边。

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">头部</div>
<div id="dyright">右栏固定<br />宽度为200px</div>
<div id="dyleft">左栏宽度自适应</div>
<div id="dyfoot">底部</div>
</body>
</html>

这个布局基本和左栏宽度固定右栏宽度自适应一样,只是从上面可以看出,#dyright写在了#dyleft前面,这里只要注意这一点就可以了^_^祝大家好运。

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

0
0

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