CSS定位：如何在另一个

我有这样的HTML结构CSS定位：如何在另一个

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

位置的块/段我需要这种定位 enter image description here

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

有没有更好的方式来做到这一点，而不知道图像尺寸，并避免使用边距来定位元素？

来源

2014-09-03 Leonardo

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

但是，您可能希望使用类或ID的<p>标记更具体一些。

来源

2014-09-03 15:02:09

谢谢，我想这是......但现在如果我想用'margin-top'稍微推低'p'，这个效果没有任何效果，直到我到达距离px的距离标题，而不是从img..so我回到我的老问题。 – Leonardo 2014-09-03 15:09:55

添加填充到顶部。这会影响段落的内部，所以应该工作。虽然可能不是你想要它工作的方式。 – 2014-09-03 15:10:43

其实，刚刚测试添加图片底部的边缘（这感觉对我来说更准确），并且工作。 http://jsfiddle.net/p82suhps/ – 2014-09-03 15:13:33

an <img>是一个内联元素，因此元素可以放置在它旁边。像你的标题。要解决这个问题，你可以将你的<img>和<h4>打包在一个<div>

来源

2014-09-03 15:17:28 LiamHT

不需要额外的元素，您可以在不更改HTML代码的情况下使用纯CSS。 – LinkinTED 2014-09-03 15:23:53

首先你让图像浮动到左侧，所以其他两个出现在图像的右侧。

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

清除段落的两侧，然后转到下一行。

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

而且ofcourse the demo

来源

2014-09-03 15:23:19 LinkinTED

或者你可以在一个DIV的图片和标题，然后在另一个段落。你也可以尝试加入padding-top:10px;，你可以用任何适合的东西代替10px。

来源

2014-09-03 15:53:56 spasticninja

CSS定位：如何在另一个

回答

相关问题