How can I align images in an overflow:hidden div

Question

I have this div :

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

Inside this div I need to put some images that have the same width as the div but have a different height. I don't know how many images there will be as they are dynamically generated.

If I put 2 images of height:7px it will show 2 images one after the other like this: The first one appears completely and the second one is cut off just under half way.

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

I want that the last image to appear completely and the other image above to be truncated, if there is not enough space in the div .

Full Code

<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

Firstly, you need to set the wrapper <div> to position:relative;

Then you need to have an inner wrapper <div> which you would set to position:absolute; and bottom:0; .

Combining this will cause the contents of the outer div to sit on the bottom of it, and any overflowing will roll off the top instead, which I think is what you're after.

I've done a quick demo for you using JSFiddle . The demo uses text as the content, but it would work equally well with images inside the inner div.

Hope that helps.

Answer 2

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

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