div 宽度自适应

最新推荐文章于 2024-07-03 09:36:39 发布

iteye_18468

最新推荐文章于 2024-07-03 09:36:39 发布

阅读量387

点赞数

分类专栏： css 文章标签： CSS HTML XHTML

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

div 宽度自适应

------

解决方法：

* 显示在左侧的div使用 float="left"

* 显示在右侧的div使用 float="right"

* 宽度自适应的 div：

* 写在 3个div的最后面，比 float:right 的 div 还靠后，

* 不定义 width 属性，或者定义为 width:auto;

* 不定义 float 属性，或定义为 float:none;

------

例子：

<!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;