html - 除了具有 2 个或更多元素的内联块

Question

我试着弄清楚，这两个p应该在图像之外，第二个p不应该在图像下。这是可能的，float: left但这会导致很多浏览器错误（主要是在 IE 下）。我怎么能得到我想要的结果display: inline-block？

<div id="one">
    <img src="http://www.jcopro.net/wp-content/uploads/2011/12/ubuntu-logo1.gif" alt="" />
    <p>Content</p>
    <p>Content</p>
</div>

---

#one {
    display: inline-block;
    width: 800px;
    vertical-align: top;
}

#one img {
    display: inline-block;
    vertical-align: top;
    width: 100px;
}

#one p {
    display: inline-block;
    vertical-align: top;
    width: 600px;
    border: 1px solid gray;
}

演示：http: //jsfiddle.net/MK5E9/1/

编辑：好的，我错误地描述了我的问题：我不想将它们p放在一行中，我希望将它们放在图像之外的每个段落下。

Answer 1

是的，但您需要容器足够宽以包含所有 3 个元素。<p>将您的 s 缩小到 300px 宽时，以下方法有效。

例子

编辑，基于一个 OP 的编辑：

好吧，这就是 float 最初的用途。浮动图像并允许它们周围的文本正确流动。例子。

如果您希望图像位于不同的“列”上，这意味着文本不会在图像周围流动，而是会在图像行开始新行，您需要限制元素的宽度。看这里。