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