使2張圖像浮動到右側並直接在彼此之下

我似乎無法讓2張圖像浮動到右側，而是直接在彼此之下。我試圖把它們放在單獨的div中，然後浮動它們，但沒有發生什麼事情我可以嘗試？使2張圖像浮動到右側並直接在彼此之下

這裏是我做過什麼：

<div id="div1"> 
     <img src="img1.png"> 
    </div> 
    <div id="div2"> 
     <img src="img2.png"> 
    </div>

這裏的CSS：

#div1 { 

    float: right; 
    margin-bottom: 10px; 
    } 

    #div2 { 

    float: right; 
    margin-bottom: 10px; 
    }

除非你需要浮動別的東西，你CSS更改爲：

#div1, #div2 { 
    text-align:right; 
    margin-bottom: 10px; 
}

編輯： 按照您的評論，該圖像與文字的容器。

下面是這種情況的解決方案：http://jsfiddle.net/PNxRZ/2/

HTML

<div class="text-container"> 
    <img src="img1.png"> 
    <img src="img2.png"> 
Lorem ipsum ... 
</div>

CSS

.text-container img { 
    float:right; 
    margin: 0 0 10px 10px; 
}

2013-09-16 18:00:34 thisiskatkat

謝謝你，這也工作，但我不想我的文字在左邊被推下來 – user2784439

我想我明白你的需要。在我更新的答案中有一個戰利品。 – thisiskatkat

多數民衆贊成它感謝你 – user2784439

添加2周的div之間的div.clearfix

<div id="div1"> 
    <img src="img1.png"> 
</div> 
<div class="clearfix"></div> 
<div id="div2"> 
    <img src="img2.png"> 
</div>

其風格應該是：

.clearfix { 
    clear:both; 
}

2013-09-16 18:00:18 bchhun

感謝這個工作，但是我的內容，這是左側已被按下。我能做些什麼來恢復它？ – user2784439

你需要清楚：對;在這種情況下保證清楚：兩者;而實際上你並不需要創建一個新的清算機制，如果你把它放在＃div2 div中就足夠了。 – golddragon007

這是我會怎麼做：

HTML：

<div id="div1"> 
     <div> 
     <img src="img1.jpg"> 
     </div> 
     <div> 
     <img src="img2.jpg"> 
     </div> 
</div>

CSS

#div1 { width: 100%;display:block;} 
#div1 div { width:100%;height:auto;display:block;clear:both;} 
#div1 div img {display:block;float: right;}

2013-09-16 18:18:51 Gar

回答