我有一个div,该div必须浮动到右侧并具有背景图片。我将该div放在另一个中以进行显示。我在不让内部div之后的文本与pictureDiv重叠时遇到问题。

我无法将其放置在表格中,因为如果需要的话,文本将无法在图像周围弯曲。当我在这里时,是否有一种方法可以使我在externalDiv之后放置的文本在externalDiv之后开始?如果告诉我使这些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>

最佳答案

以下内容可能与您要执行的操作很接近:

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之外,但可以对其进行更改。请给出意见!

09-25 17:13
查看更多