Question

我有div：

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

在此div内，我需要放置一些宽度与div相同但高度不同的图像。我不知道它们会动态生成多少个图像。

如果我放了height:7px的2张图像，它会一个接一个地显示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的内容位于它的底部，而任何溢出都会从顶部滚落，我认为这就是你所追求的。

我做了quick demo for you using JSFiddle。该演示使用文本作为内容，但它对内部div中的图像同样有效。

希望有所帮助。

Answer 2

使用min-width＆amp; min-height代替使用width＆amp; height

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

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

2 个答案: