iframe与父<p> </p>对齐

Question

我的网站分为4个部分，每个部分都有一个h3和一个<p>。 <p>中的所有内容 以margin-left: auto; margin-right: auto;为中心，它还有背景颜色和边框。 <p>也随着内容自动增长。

<p>中的一个是iframe，它也是居中的，但我需要它与左边对齐。 iframe小于<p>的宽度。

float：left有效，但iframe会从<p>关闭。所以我的<p>就行了，iframe浮出了它。

知道为什么会这样吗？

http://jsfiddle.net/dennym/KBShz/

Answer 1

尝试添加：

#another p { overflow: hidden; }

更新了小提琴：http://jsfiddle.net/KBShz/13/

Answer 2

在这里，我更新了你的小提琴：

http://jsfiddle.net/KBShz/14/

发生这种情况的原因是浏览器如何处理浮动元素。它们的行为不同，它们的容器不再适合它们。在这种情况下使用text-align: left代替。

在其他情况下，您可能需要在容器div的末尾放置一个<div style="clear:both"></div>，以告诉它增长以适应其内容。