Question

我想使用内联块来获取图像，并在其右侧使用文本。但它不起作用，出了什么问题？

HTML

<img src="http://i0.gmx.net/images/684/19209684,pd=2,h=250,mxh=600,mxw=800,w=480.jpg" width="120" />
<article>
    <h4> Title</h4>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
</article>

CSS

img, article{
     display: inline-block;
}

Answer 1

除非你给article一个特定的宽度，否则它不会起作用，因为文章的内容会流动整个页面

article{
    width:300px;
}

选中 DEMO

Answer 2

浮动一个元素时，它的显示属性会被处理并设置为块。您需要将容器设置为display：inline-block以创建不需要清除元素的新块格式化上下文。（还有其他方法。）见这里：

enter image description here

左边是我设置的样式，右边是同一个元素的计算样式。注意显示属性。

您必须通过设置overflow：hidden;来为容器创建新的块格式化上下文;或显示：inline-block;或者通过浮动容器（不是最好的解决方案）。

Answer 3

发生这种情况是因为两个元素在加在一起时的宽度超过100％，因此article元素被强制转换为新行。对此的一个简单修复是将元素包装在一个新的元素集中以显示为“table”，将img和article元素设置为显示为“table-cell”：

<section>
    <img ... />
    <article>...</article>
</section>

section {
    display: table;
}

img, article{
    display: table-cell;
    vertical-align: middle;
}

JSFiddle demo

Answer 4

如果您不希望文章包裹在图片下方，您可以浮动图片并将文章设置为overflow: hidden：http://codepen.io/pageaffairs/pen/HAjfE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

img {float: left; margin-right: 10px;}
article {overflow: hidden;}
h4 {margin-top: 0;}

</style>
</head>
<body>

<img src="http://i0.gmx.net/images/684/19209684,pd=2,h=250,mxh=600,mxw=800,w=480.jpg" width="120" />
<article>
    <h4> Title</h4>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
</article>

</body>
</html>

Answer 5

可以成为文章中的图像吗？

您可以将图像放在文章的P标签中，然后使用float css。

<article>
    <h4> Title</h4>
    <p>
        <img src="http://i0.gmx.net/images/684/19209684,pd=2,h=250,mxh=600,mxw=800,w=480.jpg" width="120" />
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.
    </p>
</article>

img, article{
    display: inline-block;
}
img { float: right; }

如何使用内联块浮动图像？

5 个答案: