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

score 4 · Accepted Answer

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

score 2 · Accepted Answer

除非您需要浮动来做其他事情，否则将您的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;
}

score 1 · Accepted Answer

这就是我要做的：

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

3 回答 3