html - 为什么这些 Div 会重叠？

Question

这对我来说毫无意义。我一直在努力研究这个，但我不知道为什么它会重叠。我有一种感觉，这是因为我使用了“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/

Answer 1

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

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