Как я могу выровнять изображения в переполнении: скрытый div

Question

У меня есть div:

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

Внутри этого div Мне нужно поместить несколько изображений, которые имеют ту же ширину, что и div, но имеют другую высоту. Я не знаю, сколько будет изображений, поскольку они генерируются динамически.

Если я поставлю 2 изображения 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 будет лежать на его дне, а любое переполнение будет скатываться с верха, что, я думаю, то, что вам нужно.

I 'Мы сделали быстрое демо для вас, используя JSFiddle .Демонстрация использует текст в качестве содержимого, но он будет одинаково хорошо работать с изображениями во внутреннем div.

Надеюсь, что поможет.

Answer 2

Используйте min-width & min-height вместо width & height

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