使2个图像向右浮动并直接相互浮动

Question

我似乎无法让2个图像向右浮动但直接在彼此之下。我试图将它们放在单独的div中，然后将它们浮起来但没有任何反应我还能尝试什么呢？

这就是我所做的：

    <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;
    }

Answer 1

除非您需要浮动内容，否则请将 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;
}

Answer 2

在你的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;
}

Answer 3

这就是我要做的事情：

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;}