如何在溢出中對齊圖像：隱藏的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>