一个大的DIV中放两个小的DIV一左一右
{ width:1000px;
height:2800px;
margin:0 auto;
} 这是最大的DIV
.left
{ width:245px;
height:2000px;
margin-top:20px;
margin-left:50px;
} 这是左边最大的DIV
.right
{ width:640px;
float:left;
}这是右边最大的DIV
这是实现出来的效果
右边的DIV被挤到下面去了 两个小的DIV宽度没有超过最大的 这是为什么 怎么解决 展开
1、首先如图所示的web结构即一个html和css即可实现。
2、打开html页面 定义一个大的div和两个小div 如图所示。
3、最常用的float浮动，只要两个小div的宽度小于等于大div的宽度，即可实现并排了。
4、使用position进行绝对定位，然后使用margin-left除去第一个小div的宽度即可。
5、使用table盒子实现div并排，这个是等宽的。
6、如图所示 这是上面三个方法运行后的结果图，可以看到一个大的DIV中嵌套两个小的DIV。
扩展资料
定位了的要素在页面上显示时仍然会从左到右一直显示。利用宽度属性就可以设定字符向右流动的限制，即设定要素的宽度。DIV { position: absolute; left: 200px; top: 40px; width: 150px }
浏览器接到这项规则时，它将文字按照规则规定的效果显示，还将段落的最大水平尺寸限制在150像素。
宽度属性只适用于绝对定位的要素。你可以使用我们学过的任何一种长度单位，或使用比例值设定宽度，比例值指相对于母体要素的比例。
IE 4中，这项属性还可用于图像。你可以通过宽度设置人为地拉宽或压缩图像。利用CSS，你可以隐藏要素，使其在页面上看不见。这条属性对于定位了的和未定位的要素都适用。
值 inherit 为缺省值。这使单元继承父单元的可见性。所以，如果某一段是隐藏的，则它包含的任何行间单元也都被隐藏。这一继承性可被明确指定的可见性取代。例如，段内的 EM 单元被指定为可见，这时如果该段被隐藏，则段内的所有其它内容都将消失，而唯有 EM 单元中的文本是可见的。
当一个要素被隐藏后，它仍然要占据浏览器窗口中的原有空间。所以，如果你将文字包围在一幅被隐藏的图像周围，那么，其显示效果将是文字包围着一块空白区域。
这条属性在编写语言和使用动态HTML时很有用，比如你可以使某段落或图像只在鼠标滑过时才显示。
特性 z-index 用于堆叠屏幕上的单元。缺省情况下，单元堆叠的顺序为它们在HTML标记出现的顺序——也就是说，后出现单元堆叠在早出现单元的上面。Z-index 特性实际上定义同属（sibling）单元的堆叠顺序以及单元相对父单元的堆叠。
按照规范草案，具有正 z-index 值的单元群都堆叠在父单元之上，它们自己的堆叠顺序则按其取值的大小来决定（值大的单元在上层）。
同样，具有负 z-index 值的单元群都堆叠在父单元之下，它们自己的堆叠顺序也按取值的大小来定（值大的单元在上层，例如值为 -1 的单元在值为 -2 的单元的上面）。
该参数值使用纯整数。z-index用于绝对定位或相对定位了的要素。你也可以给图像设定z-index。（对于Communicator，最好将 <IMG>标签包在[font]或 标签内，然后将z-index应用到[font]或 。）
1、首先我们如图所示的web结构即一个html和css即可实现。
2、打开html页面 定义一个大的div和两个小div 。
3、两个小div的宽度小于等于大div的宽度，即可实现并排了。
4、使用position进行绝对定位，然后使用margin-left除去第一个小div的宽度即可。
5、用table盒子实现div并排，这个是等宽的。
6、使用display：inline（将div设置为内联）实现并排效果。
7、如图所示 这是上面三个方法运行后的结果图，可以看到两个div并排了。
解决方法：在标签结束后下一个标签中加上一个清除浮动的CSS clear:both;
21. 浮动后IE6解释外边距为实际边距的双倍
解决办法：加上display:inline
22. IE6下图片下方会有空隙
解决办法：为img加上display:block或设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom
23. IE6下两个层中间有空隙
解决办法：设置右侧div也同样浮动float:left或者相对IE6定义 margin-right:-3px;
你的css .left 这个没有float，所以会下掉。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.big { overflow:auto; background:#f00;}
.small1 { width:50%; height:100px; float:left; background:#0f0;}
.small2 { width:50%; height:50px; float:right; background:#00f;}
</style>
</head>
<body>
<div class="big">
<div class="small1">
</div>
<div class="small2">
</div>
</div>
</body>
</html>
