0

这对我来说毫无意义。我一直在尝试研究这个，但我不知道它为什么会重叠。我有一种感觉，这是因为我使用了“img”标签，或者因为我需要在某处使用某种位置类型，但我已经尝试过了，但没有成功。

http://jsfiddle.net/FhU3r/

#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/

4

4 回答 4

3

如果我了解您要做什么，我会添加float: left到#rightdiv.

这将使段落仅出现在图像和标题的一侧。当然，如果父容器中没有足够的宽度，它将换行到下一行，因此需要注意。

于 2012-07-01T04:34:07.683 回答
3

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

我所知道的 float 属性在概念上确实有两种不同的用途，即使技术实现是相同的。第一个是让内容围绕一个元素流动，第二个是让元素在布局中彼此相邻。据我所知，您正在寻找第二个但实施第一个。

让我们回顾一下第一个，让内容围绕一个元素流动。

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

例子

然后是第二个，为了布局目的，你想把东西贴在一起。这似乎就是你所追求的。

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

基本上你只需要将两个元素都向左浮动，使用float: left;. 右边的那个不会试图绕着左边的那个流动，而是存在于它自己的垂直列中。即使它比左边的长，它也只会延伸它的柱子，而不是在左边的柱子下面流动。

例子

这种方法的一个丑陋方面是你不能随便在两列下面放一些东西。如果您只是添加另一个段落，它将环绕两个浮动元素：

例子

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

例子

有关这方面的权威来源，请查看W3C 规范。

这篇文章也很好地解决了浮动的常见问题。

于 2012-07-01T05:15:11.673 回答
1

由于您有一个浮动 div 和另一个非浮动 div，因此浮动 div 已脱离文档的正常流程。您可以通过添加float:right;到#rightdiv.

如果您希望一个显示在左侧，另一个显示在右侧 - 从您的 div 的 id 来看，这听起来像您这样做:) - 那么您需要手动设置它们的宽度（px、%、em - 无论你需要什么），这样它们就可以水平地放入包含的元素中。如果两个浮动元素不能放在同一行，则第二个元素会“碰撞”到第二行。

此外，如果您有更多内容位于这些 div 下方，您可能希望使用以下内容“清除”浮动元素：

<br style="clear:both" />

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

于 2012-07-01T04:33:56.787 回答
0

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

于 2012-07-01T04:28:03.003 回答