html - 包含 2 个或更多元素的内联 block

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 宽。

Example

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

嗯，这就是 float 最初的意思。 float 图像并允许在它们周围正确排列文本。 <强> Example .

如果您希望图像位于不同的“列”中，这意味着文本不会围绕图像流动，而是会在图像的行处开始一个新行，您需要限制您的宽度元素。 <强> See here.