我有一个必须向右浮动的 div 并且有一个背景图像。我将该 div 放在另一个 div 中以供显示。我在不让内部 div 与pictureDiv 重叠之后的文本时遇到问题。
我不能把它放在桌子上，因为如果需要的话，文本将无法围绕图像弯曲。当我在这里时，有没有办法让我在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>
在第一个元素上使用浮动并在第二个元素上使用“布局”应该可以解决您的问题，无论屏幕大小或浮动元素：http: //jsfiddle.net/3yAJx/
#pictureDiv {
background-image: url(http://thomasmorestudies.org/gallery_art/g-a5_l.jpg);
background-repeat: no-repeat;
float: right;
}
#text {
overflow:hidden;
/* old IE */
zoom: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，但我可以改变它。请评论！
浮动 div 会在其容器内浮动。因此，外部 div 的背景图像将始终位于内部浮动 div 下方。
我看到了一个最好的解决方案。那将是使用第三个 div 作为背景：
HTML：
<div class="outer">
<div class="left-with-background">
</div>
<div class="right-floating">
</div>
</div>
CSS：
.outer { overflow: hidden; }
.left-with-background { background-image: url(images/back.png); }
.right-floating { float: right }
1）你可以使用一个padding-top：对于div“图片”的图像高度相同的值2）你可以把href放在div之外
提示：更改<center>标签
<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; padding-top:400px">
<span style="">[<a onclick="Hide()" href="javascript:void(0);">Click here for full photo</a>]</span>
<hr>
</div>
</div>