为什么这些Divs重叠？

这是没有意义的我。我一直在研究这个，但我不知道它为什么重叠。我有一种感觉，那是因为我使用了“IMG”标签或因为我需要的地方使用某种位置的类型，但我已经试过他们并没有奏效。为什么这些Divs重叠？

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

来源

2012-07-01 king

关于你的编辑，它适用于我，但第二个盒子非常宽。当我将宽度更改为适合我的屏幕时，它适用于我：http://jsfiddle.net/FhU3r/20/ – Phil

如果我明白你想要做什么，我会添加float: left到#rightdiv。

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

来源

2012-07-01 04:34:07

有趣的，工作。但是，无论浏览器大小如何，它如何保持在哪里？我只是试图在jfiddle中做到这一点，但如果分辨率太小，它会将它撞到另一个div下面。我添加位置：固定，但它没有工作：看到这里：http://jsfiddle.net/FhU3r/11/尝试改变底部框的宽度，你会看到它继续下去，然后去侧面时，足够的空间 – king

用容器div再次更新了它，并且您的建议足够大，但是不起作用：请看一下：http://jsfiddle.net/FhU3r/15/ – king

@sab - 容器不是很宽足够（4个像素）。你必须加上宽度，边距和边框。看起来你没有计算边界。这个作品... http://jsfiddle.net/FhU3r/23/（我制作#picdiv 4像素更窄） –

浮动一个div需要它的 “流”。所以你有点“浮动”在图像上的div。如果你浮动图像，它应该定位你想要的。

来源

2012-07-01 04:28:03 Naddiseo

应以何种方式浮动img？我漂浮了它，但随后图像因为某种原因消失了 – king

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

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

另外，如果您有更多的内容，去这些div下面，你可能会想“清除”浮动的东西元素是这样的：

<br style="clear:both" />

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

来源

2012-07-01 04:33:56 Andrew

'
>>>'，我见过的东西的有趣选择更频繁。表面上我喜欢语义，但它是否也在下面添加一些空间？ – Phil

我明白了。所以我需要两个容器。让我试试 – king

我不明白。我试图用一个包含div，但它仍然无法正常工作。我没有得到为什么这不是现在工作，因为我做过这样的东西在过去，它的工作：http://jsfiddle.net/FhU3r/15/ – king

首先，注意你的的边框重叠，但内容不对。

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

让我们先看看内容，让内容在元素周围流动。

说要发布的文章。你有很多段文字，加上一些图片可以插入整个身体。他们应该在一侧，左侧或右侧“漂浮”，并且段落文本应该围绕它们流动。而且，包含段落文本图像周围流动还应该包含图像本身箱。这就是你在代码中看到的。

Example

然后还有第二，要坚持彼此相邻的事情布局的目的。这似乎是你在追求的。

那么，第一个目的的住宿使第二个目的使用花车有点丑陋。我不知道历史，但如果我不得不猜测，我会说浮动规格是围绕第一个目的设计的。

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

Example

一个这种方法的丑陋的方面是，你不能只是不小心把两列下面的东西。如果你只是在另一段扔，它会环绕都浮动元素：

Example

因此，要解决这个问题，你需要添加clear: left，无论你想成为两个左浮动元素下方。

Example

有关此的权威来源，检查出W3C specs。

This article也做了一个相当不错的工作，解决与浮动的常见问题。

来源

2012-07-01 05:15:11 Phil

非常感谢你提供这个深度信息。 – king

为什么这些Divs重叠？

回答

相关问题