首页 > 学做网站步骤

CSS3行3列自适应高度div布局


时间:2009-09-28 04:55:03  来源:  作者:
此代码欢迎各位转摘;网上有好多,但没有真正的自适应高度,看到1个自适应宽度的,还可以,没有我们长用的控制1定宽度的。
测试通过:IE5、IE5.5、IE6、IE7、FF其他的没有测试,如果有问题在下面留言。
说下主要的CSS在此页面的作用,:overflow:hidden;强制contain自适应高度(看背景),clear:both这个就不用说啦!


body{text-align: center;}
div{border:1px solid #f60; text-align:left;}
#head{
width : 780px;
margin: 2px auto;
}
#contain{ margin:0 auto; overflow:hidden; background:#eee;
width: 780px;
}
#left{
float: left;
width: 150px;
margin: 2px 2px 0px 0px;
}
#middle{
float:left;
width: 465px;
margin: 2px 0px 2px 0px;
}
#right{
float:right;
width: 150px;
margin: 2px 0px 2px 0px;
}
#foot{
clear:both;
width:778px;
margin:2px auto;

}


head
head


left

left

left
middle

middle

middle

middle

middle

middle

middle

middle

middle

middle

middle

middle

middle
right

foot
来顶一下
近回首页
返回首页
上一篇: CSS Hack 汇总快查
下一篇: CSS来实现图片半透明效果

版权所有:   2005-2009  搜发网络服务有限公司  公司地址:辽宁省锦州市铁北金秋大厦正楼
自己做网站 QQ:  免费做网站 QQ: 学做网站 QQ: 企业做网站 QQ:  公司邮箱:5729799@qq.com
《中华 人民共和国增值电信业务经营许可证》编号:辽ICP备08001153号   版权所有 严禁复制

友情链接:免费网站制作 免费网站申请 web免费制作网站教程 免费申请网站 研究生考研信息博客 免费网站制作论坛