2

目前，一个 div 是浮动的 - 我的问题是为什么两个 div 重叠，即使每个 div 都设置了尺寸？我怎样才能解决这个问题？

HTML：

 <div class="wrapper">
    <div class="block1">
    </div>
    <div class="block2">
    </div>
 </div>

我的 CSS：

.wrapper {border:black solid;width:500px;height:1000px}
.block1 {width:300px;height:300px;float:right;border:solid red;}
.block2 {width:300px;height:300px;border:solid green;}

jsfiddle在这里-http: //jsfiddle.net/FLwUA/1/

4

2 回答 2

5

两个 div 重叠，因为一个固定在 DOM 布局中（非浮动的），另一个有效地从 DOM 结构中移除（浮动的）并且可以自由叠加，因为这两个不会并排放置在父级中容器由于宽度是两个小。

要解决此问题，有多种选择，具体取决于您所说的修复。

您可以在非浮动 div 上使用 CSS 'clear' 属性来强制它的一侧或两侧没有任何内容（在给定的场景中，'clear:both;' 或 'clear:left;' ）。

或者

您可以将非浮动 div 设置为浮动，这也会将其从 DOM 布局中移除，使其现在与另一个浮动 div 处于相同的情况。

额外的

仅供参考，以防所有浮动对象都成为问题。在不浮动 div 的情况下获得相同结果的一种方法是使用“display:inline-block;” 它们都具有 CSS 属性，但是您需要在 HTML 中交换两个 div 的顺序以获得相同的布局。

于 2013-03-31T15:02:55.420 回答
3

这是因为您使用像素为它们提供定义的宽度 - 您的包装器宽度仅为500px，但是您使用300px的300pxdiv 内部等于等于，600px因此它最终会出现在容器 div 之外。您可以像这样使用与父 div 相关的百分比。这是一个jsFiddle。

.wrapper {border:black solid; width:500px;height:1000px}
.block1 {width:49%;height:300px;float:right;border:solid red;}
.block2 {width:49%;height:300px;border:solid green;}

或者，如果您想保持固定宽度并且如果它们太大，则将一个放在另一个之上，您可以只float在第二个块上使用。这是jsFiddle。

.wrapper {border:black solid; width:500px;height:1000px}
.block1 {width:300px;height:300px;float:right;border:solid red;}
.block2 {width:300px;height:300px;float:left; border:solid green;}
于 2013-03-31T14:55:05.017 回答