电脑软硬件应用网
当前位置: 电脑软硬件应用网 > 设计学院 > 网络编程 > CSS教程 > 正文
CSS三行三列自适应高度div布局
CSS三行三列自适应高度div布局
2007-12-11 16:00:02  文/未知   出处:网络博客   

此代码欢迎各位转摘;网上有好多,但没有真正的自适应高度,看到一个自适应宽度的,还可以,没有我们长用的控制一定宽度的。
测试通过:IE5、IE5.5、IE6、IE7、FF其他的没有测试,如果有问题在下面留言。
说下主要的CSS在此页面的作用,:overflow:hidden;强制contain自适应高度(看背景),clear:both这个就不用说啦!
[html]
<style type="text/css">
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;

}
</style>
<div id="head">
  <p>head</p>
  <p>head</p>
</div>
<div id="contain">
  <div id="left">left<br>
  left<br>
  left</div>
  <div id="middle">middle<br>
  middle<br>
  middle<br>
  middle<br>
  middle<br>
  middle<br>
  middle<br>
  middle<br>
  middle<br>
  middle<br>
  middle<br>
  middle<br>
  middle</div>
  <div id="right">right</div>
</div>   
<div id="foot">foot</div>
[/html]

  • 上一篇文章:

  • 下一篇文章:
  • 最新热点 最新推荐 相关文章
    CSS伪类选择器nth-child()
    css3教程:background属性调整增强
    css教程:CSS3 Media Queries 详解
    CSS 类名的长命名和短命名
    CSS实例教程:非浮动区域设置宽度
    如何使用css约束一个层不可见?
    CSS的list-style解释
    小议使用“完整”的CSS的缺点
    CSS中的相对定位与绝对定位详解
    实例使用DIV+CSS制作圆角边框加阴影…
    关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 |

    Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号