强制将元素绘制到右侧

Question

<div id="div1">
    <img id="img1" src="1.jpg" />
    <img src="2.jpg" />
    <img src="3.jpg" />
    <div style="float:none;clear:both;"></div>
</div>

img { float:left; width:150px; height:100px; } 
#div1 { overflow:hidden; width:200px; height:100px; }

我有3张图片，正如你猜测的那样，第二张图片并不完全适合右边。它不是部分绘制，而是从新行绘制（但是从overflow: hidden开始我们看不到它。）

那么，如何强制将第二张图像绘制到第一张图像的右侧，而不是从新线条中绘制出来？

Answer 1

尝试使用img {display：inline}而不是float。或者你可以将它们嵌入ul和li中并漂浮它们。

Answer 2

完成它：

<div id="div2">
<div id="div1">
        <img id="img1" src="1.jpg" />
        <img src="2.jpg" />
        <img src="3.jpg" />
        <div style="float:none;clear:both;"></div>
        </div>
</div>

img{float:left;width:150px;height:100px;    } 
#div1{width:450px;height:100px;} 
#div2{width:200px;height:100px;}