您的位置：首页 > 其它

div 自适应宽度

2015-02-12 16:54 85 查看

div 自适应宽度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {margin: 0 auto;text-align: center;}
#container {text-align: left;background-color: green;}
#top {height: 160px;background-color: red;}
#middle {height: 240px;background-color: yellow;}
#middle_left {height:240px;width: 200px;float: left;background-color: #333;}
#middle_right {height:240px;width: 220px;float: right;background-color: #ddd;}
/* 自适应宽度的 div：1.不要设置 width,即 width:auto ，2.不要设置 float,即 float:none，3.其div的位置应放在最后，比 float='right' 的 div 还靠后*/
#middle_center {height:240px;background-color: #aaa;}
#foot {height: 120px;background-color: teal;}
.clearDiv {clear:both;}
</style>
</head>
<body>
<div id="container">
<div id="top">top</div>
<div class="clearDiv"></div>
<div id="middle">
<!-- 居左 -->
<div id="middle_left">middle left</div>
<!-- 居右 -->
<div id="middle_right">middle right</div>
<!-- 自适应宽度的 div 应放在最后 -->
<div id="middle_center">middle center</div>
</div>
<div class="clearDiv"></div>
<div id="foot">foot</div>
</div>
</body>
</html>

ie6 下 float 元素的空隙问题：

解决方案：
float:left; 时 _margin-right:-3px;
float:right;时 _margin-left:-3px;
转自：http://kuchaguangjie.iteye.com/blog/752234

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航