0

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

http://jsfiddle.net/PaDvr/

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

的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;
}​

是什么导致图像位于文本之上？

4

5 回答 5

3

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

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

第二个是您的relative定位将其从常规文档流中删除。定位的本质relative是，将其向下移动 23px 会将其移动到恰好位于其下方的任何位置上 23px。抵消这种情况的一种方法是向图像添加一个边距底部，该边距等于您的相对偏移量。在 JSFiddle 上查看

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

虽然如果你只是想上下移动图像，我只会使用边距而不是相对定位。在 JSFiddle 上查看

#photo{
  ...
  margin-left: 32%;
  margin-top: 23px;
}​
于 2012-12-21T17:55:07.423 回答
1

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

于 2012-12-21T17:55:30.280 回答
1

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

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

您需要考虑 #photo 中的 top: 23px ，这可以通过设置 .media-body margin-top: 23px; 来完成。

于 2012-12-21T17:56:50.873 回答
0

因为 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/

于 2012-12-21T18:02:02.443 回答
0

如果您想显示全尺寸图像，上述答案解决了这个问题。

但是，如果您打算将图像缩小到最大 100px 宽并将其限制在照片 div 中，则根本原因是默认情况下引导 CSS 将 max-width:100% 应用于图像，这会导致调整大小关闭.

解决方案是添加一个新类 

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

见http://jsfiddle.net/PaDvr/28/

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

于 2012-12-22T13:44:14.463 回答