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>缩小到300px宽时，以下情况有效。~~

的 Example

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

嗯，这就是浮动实际上最初的意思。浮动图像并允许正确的文本流在它们周围。的 Example

如果您希望图像位于不同的“列”上，意味着文本不会在图像周围流动，但会在图像的行开始一个新行，您需要限制图像的宽度。元素。的 See here.

内联块，除了2个或更多元素

1 个答案: