javascript - 有没有一种方法可以使具有 background-image 和 float 属性的 div 不重叠？

Question

我有一个 div 必须向右浮动并且有一个背景图像。为了显示目的，我将那个 div 放在另一个 div 中。我在不让内部 div 与 pictureDiv 重叠后的文本方面遇到问题。

我不能将它放在表格中，因为那样的话，如果需要的话，文本将无法围绕图像 flex 。当我在这里时，有没有办法让我在 outerDiv 之后放置的文本在 outerDiv 之后开始？如果有人告诉我一种使这些 div 不可重叠的方法，我的问题就会得到解决。

<div id="outerDiv">
<div id="pictureDiv" style="background-image: url(http://thomasmorestudies.org/gallery_art/g-a5_l.jpg); 

background-repeat: no-repeat; float: right;">

<center>[<a onclick="Hide()" href="javascript:void(0);">Click here for full photo</a>]</center>
<hr>
</div>
</div>

Answer 1

以下可能与您正在尝试做的很接近:

HTML:

<div class="outerDiv">
    <div class="pictureDiv"></div>
    <div class="caption">[<a href="$">Click here for full photo</a>]</div>
    <hr>
</div>

CSS:

.outerDiv {
    border: 1px solid blue;
    overflow: auto;
    /* this clears the floated content */
}
.pictureDiv {
    background-image: url(http://placekitten.com/300/300);
    background-repeat: no-repeat;
    float: right;
    width: 300px;
    height: 300px;
    margin-bottom: 1.00em;
}
.caption {
    text-align: center;
    clear: both;
}

参见演示:http://jsfiddle.net/audetwebdesign/8ZHqE/

我不确定你想要标题的位置，所以我把它放在 .pictureDiv 之外，但我可以改变它。请评论!