html - iframe 与父级对齐

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。

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