此代码欢迎各位转摘;网上有好多,但没有真正的自适应高度,看到一个自适应宽度的,还可以,没有我们长用的控制一定宽度的。 测试通过: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]
|