Css定位：如何将一个块/段定位在另一个下

Question

我有这个html结构

<img class="media-object pull-left" src="http://placehold.it/40x40">
<h4 class="media-heading">Heading</h4>
<p>Paragraph lorem ipsum bla bla bla </p>

我需要这种定位

也就是说，我总是希望段落出现在图像下面。最基本的解决方案是让h4一个margin-bottom足以推动图片下方的段落（或者给p一个等价的margin-top）。

在不知道图像尺寸并避免使用边距来定位元素的情况下，有更好的方法吗？

Answer 1

.pull-left {
 float: left;
}
p {
 clear: both;
}

但是，您可能希望使用<p>标记的类或ID进行更具体的说明。

Answer 2

首先让图像向左浮动，其他两个显示在图像的右侧。

标题不需要进一步调整（在演示中它有一个margin-bottom: 0，只是为了确保边距没有推动图像下面的段落。）

段落的两边都清晰，然后进入下一行。

.pull-left {
    float: left;
}
p {
    clear: both;
}

当然the demo

Answer 3

<img>是一个内联元素，因此元素可以放在它旁边。喜欢你的标题。要解决此问题，您可以将<img>和<h4>包裹在<div>

中

Answer 4

或者，您可以将图像和标题放在一个div中，然后将段落放在另一个div中。您还可以尝试添加padding-top:10px;，以便用适合的任何内容替换10px。