Question

这对我没有意义。我一直试图研究这个，但我不知道为什么它重叠。我有一种感觉，因为我使用了'img'标签，或者因为我需要在某处使用某种位置类型，但我已经尝试了它们并且它不起作用。

#picdiv {
height:405px;
width:320px;
border:1px solid black;
margin:15px;
    float:left;
 }

#rightdiv {
width:620px;
height:320px;
border:1px solid black;

 } 

<div id="picdiv">
<center><img src="img.png" /></center>
<div id="quote">
"Here's Some Inspirational Text Like OMG!"
</div> <!-- end quote -->
</div> <!-- end pic container -->

<div id="rightdiv">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>

我对其进行了更新，但仍无法使其正常工作：http://jsfiddle.net/FhU3r/15/

Answer 1

如果我了解您尝试做的事情，我会将float: left添加到#rightdiv。

这将使段落显示在图像和标题的旁边。当然，如果您在父容器中没有足够的宽度，它将换行到下一行，以便注意这些内容。

Answer 2

首先，请注意您的边框重叠，但内容不重叠。

即使技术实现相同，浮动属性确实有两个概念上不同的用途，我知道。第一个是让内容围绕一个元素流动，第二个是将元素放在一个布局中。从我所看到的，你正在寻找第二个，但实施第一个。

让我们看看第一个，让内容在元素周围流动。

假设您正在发表文章。你有很多段文字，还有一些插入整个身体的图像。它们应该“浮动”在一侧，左侧或右侧，并且段落文本应该围绕它们流动。并且，包含在图像周围流动的段落文本的框也应该包含图像本身。这就是你在代码中看到的内容。

Example

然后是第二个，你想要将东西彼此相邻以便进行布局。这似乎是你所追求的。

嗯，第一个目的的调整使第二个目的使用浮动有点难看。我不知道历史，但如果我不得不猜测，我会说浮动规格是围绕第一个目的设计的。

基本上你只需要使用float: left;将两个元素浮动。然后右边的那个不会试图围绕左边的那个流动，而是存在于它自己的垂直列中。即使它比左边的那个长，它也会扩展它的列，而不是在左边的那个下面流动。

Example

这种方法的一个丑陋之处在于，你不能随便在两列之下放置一些东西。如果你只是引入另一个段落，它将包围两个浮动元素：

Example

所以要解决这个问题，你需要将clear: left添加到两个左浮动元素下面的任何内容。

Example

有关此问题的最终来源，请查看W3C specs。

This article在解决浮动的常见问题方面做得非常出色。

Answer 3

由于您有一个浮动div和另一个未浮动的div，浮动的div将从文档的正常流程中取出。您可以通过将float:right;添加到#rightdiv来解决此问题。

如果你想让一个显示在左边而另一个显示在右边 - 从你的div的id，它听起来像你:) - 然后你需要手动设置它们的宽度（px，％，em - 无论你需要什么），这样它们就可以在包含元素中水平放置。如果两个浮动元素不能放在同一条线上，则第二个元素会“碰撞”到第二条线。

此外，如果你有更多内容低于这些div，你可能想要用这样的东西“清除”浮动元素：

<br style="clear:both" />

这将确保下面的任何元素不会与浮动元素重叠。我希望这有帮助！

Answer 4

浮动div将其从“流程”中取出。所以你有点“浮动”图像的顶部。如果浮动图像，它应该按照你想要的方式定位。

为什么这些分裂重叠？

4 个答案: