Html 在右边浮动两个div，一个在另一个上面

全部 这是我的第一篇堆栈溢出帖子，提前感谢您的帮助

我把一个有内容的页面和有图像背景的div放在一起，当我试图在右边浮动两个div时，一个在另一个的上面，因为无法将内容向左流动，我使用了clear，所以一个div在右边另一个div的上面，但是我试图放在左边的内容是与第二张图片对齐的，在那里应用了clear，那么第一个div有一个很大的间隙，有什么建议吗

我在这里附上密码

.img1 {
float: right;
width: 250px;
box-shadow: 7px 7px 5px #cccccc;
border-radius: 10px;
border: 1px solid #f5aca6;
background: url("url") no-repeat 50% 10px;
background-color: #ffecec;
padding: 70px 5px 10px 5px;
}

.img2 {
float: right;
background: url("url")no-repeat 100% 100%;
margin-top: -20px;
margin-bottom: 10px;
margin-left: 30px;
background-color: #006534; 
color: #d2d2d2;
line-height: 20px;
font-size: 13px;
width: 250px;
border: thin silver solid;
box-shadow: 7px 7px 5px #cccccc;
padding: 5px 5px 0px 5px;
}

HTML

内容

内容
内容。。。。。。。。。

试试这个，我相信这就是你想要的：

HTML:

<div style="float: left;">
<div>Content.........</div>
</div>

<div style="float: right;">
<div class="img1">content</div>
<br>
<div class="img2">content</div>
</div>

.img1 {
width: 250px;
box-shadow: 7px 7px 5px #cccccc;
border-radius: 10px;
border: 1px solid #f5aca6;
background: url("url") no-repeat 50% 10px;
background-color: #ffecec;
}

.img2 {
background: url("url")no-repeat 100% 100%;
background-color: #006534; 
color: #d2d2d2;
line-height: 20px;
font-size: 13px;
width: 250px;
border: thin silver solid;
box-shadow: 7px 7px 5px #cccccc;
}

---

JsFiddle:

请发布您在问题中尝试过的代码。正如@j08691所说，请发布您尝试过的代码。清除将使标记“下方”中的任何内容都显示“下方”，无论浮动是否已清除。感谢您的回复，我已修改内容，但现在内容位于两个img div下方，我已颠倒顺序，内容位于两个img div上方，有什么想法吗？从您描述的症状判断，你很可能忘了在内容（或者更好地说，内容容器）中添加

float:left

。嗨，多亏了这个，我在页面上添加了float left，内容在页面上，img div要么在页面右上方，要么在页面右下方，这取决于codeall的顺序，我已经为内容设置了一个宽度，这样img可以向上移动，但是内容没有在底部包裹imge，有什么想法吗？看起来左边的浮动对内容部分不起作用，我已经为它设置了宽度，所以它会向上移动，如果内容太长，img div下面会有空间。

.img1 {
width: 250px;
box-shadow: 7px 7px 5px #cccccc;
border-radius: 10px;
border: 1px solid #f5aca6;
background: url("url") no-repeat 50% 10px;
background-color: #ffecec;
}

.img2 {
background: url("url")no-repeat 100% 100%;
background-color: #006534; 
color: #d2d2d2;
line-height: 20px;
font-size: 13px;
width: 250px;
border: thin silver solid;
box-shadow: 7px 7px 5px #cccccc;
}