如何在溢出中对齐图像：隐藏的div

Question

我有这个div ：

<div style="width:10px;height:10px"></div>

在此div我需要放置一些与div宽度相同但高度不同的图像。 我不知道将动态生成多少张图像。

如果我放置2张height:7px图像， height:7px显示2张图像，如下所示：第一张完全显示，第二张被截去一半。

http://conta.md/rafturi/schita.png

如果div没有足够的空间，我希望最后一张图像完全显示而上面的另一张图像被截断。

完整代码

<div style="float:left;width:<?=$raft[$j]['latime_produs'];?>px;height:<?=$inaltime_p‌roduse;?>px;">
    <?php for ($o=0;$o<$cate_peste;$o++) { ?>
        <img src="../xyza/<?=$raft[$j]['poza_produs'];?>" width="<?=$raft[$j]['latime_produs'];?>" height="<?=$inaltime_produs;?>" />
    <?php } ?>
</div>

Answer 1

首先，您需要将包装器<div>为position:relative;

然后，您需要有一个内部包装<div> ，您可以将其设置为position:absolute; bottom:0; 。

结合使用这将导致外部div的内容位于其底部，并且所有溢出都将从顶部开始滚动，我想这就是您所追求的。

我已经使用JSFiddle为您做了一个快速演示 。 该演示使用文本作为内容，但它与内部div中的图像同样适用。

希望能有所帮助。

Answer 2

使用min-width和min-height而不是width和height

<div style="min-width:10px;min-height:10px"></div>