Question

我不确定如何解决这个问题。

我希望图像放在文本之前，而不是放在文本之上。

html：

<div id="photo">
<img style="-webkit-user-select: none" src="http://cdn.androidpolice.com/wp-content/themes/ap1/images/android1.png">
</div>
<div id="text" class="media-body">
    lorem ipsum bla blah...
    </div>

css：

#photo{
    border: 1px solid black;
    max-width: 100px;
    max-height: 200px;
    min-width: 266px;
    min-height: 286px;
    position: relative;
    left: 32%;
    top: 23px;
}

是什么原因导致图像位于文本顶部？

Answer 1

这里有两个问题。首先是你的最大和最小宽度和高度设置。 div的最大高度应至少与图像一样高，并且高于最小高度。 See it here

#photo {
  ...
  max-height: 404px;
}

第二个是你的relative定位将其从常规文档流中删除。 relative定位的本质是将它向下移动23px使其移动到它下面的任何地方23px。抵消这种情况的一种方法是在图像上添加一个等于相对偏移量的边距底部。 View on JSFiddle

#photo {
  position: relative;
  left: 32%;
  top: 23px;
  margin-bottom: 23px;
}

虽然如果你只是试图将图像向下移动，我只是使用边距而不是相对定位。 View on JSFiddle

#photo{
  ...
  margin-left: 32%;
  margin-top: 23px;
}

Answer 2

您的max-height: 200px;和top: 23px;导致此问题。如果你删除它，它不会重叠。 http://jsfiddle.net/PaDvr/3/

Answer 3

从CSS中删除max-height: 200px;并添加

.media-body {
    margin-top: 23px;  
}

你需要考虑#photo中的top：23px，这可以通过设置.media-body margin-top：23px;

来完成

Answer 4

因为top：xx推送相对对象，添加

margin-bottom:23px

EJ：

#photo{

    border: 1px solid black;

    max-width: 100px;

    max-height: 200px;

    min-width: 266px;

    min-height: 286px;

    position: relative;

    left: 32%;

    top: 23px;

    margin-bottom:23px

}

测试：http://jsfiddle.net/PaDvr/5/

Answer 5

如果您想要显示完整尺寸的图像，上述答案可以解决问题。

但是，如果您打算将图像缩小到最大100px宽并将其限制为照片div，则根本原因是默认情况下bootstrap CSS将max-width：100％应用于图像并且这是投掷调整大小。

解决方案是添加新类

#photo img{
max-width:100px;
}

请参阅http://jsfiddle.net/PaDvr/28/

然后，您可以使用上述建议根据需要调整照片div的大小

如何使用css在文本顶部修复图像

5 个答案: