在右邊浮動兩個div，一個在另一個上方

Question

這是我的第一個堆棧溢出帖子，在此先感謝您的幫助

我將內容和帶有圖像背景的div放在一個頁面上，當我嘗試將兩個div浮動到彼此頂部的右側時，在向左流動內容時遇到麻煩，我使用了clear，所以一個div位於頂部另一個在右邊，但是我想在左邊放的內容與應用了透明效果的第二個圖像對齊，那么第一個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

<div class="img1">content</div>
<p class="clear"></p>
<div class="img2">content</div>
<div>Content.........</div>

Answer 1

嘗試一下，我相信這就是您要的：

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>

CSS：

.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： https ：//jsfiddle.net/nmzwLn2q/1/