[英]How can I align images in an overflow:hidden div
I have this div
: 我有这个
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. 在此
div
我需要放置一些与div
宽度相同但高度不同的图像。 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. 如果我放置2张
height:7px
图像, height:7px
显示2张图像,如下所示:第一张完全显示,第二张被截去一半。
http://conta.md/rafturi/schita.png 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
. 如果
div
没有足够的空间,我希望最后一张图像完全显示而上面的另一张图像被截断。
Full Code 完整代码
<div style="float:left;width:<?=$raft[$j]['latime_produs'];?>px;height:<?=$inaltime_produse;?>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>
Firstly, you need to set the wrapper <div>
to position:relative;
首先,您需要将包装器
<div>
为position:relative;
Then you need to have an inner wrapper <div>
which you would set to position:absolute;
然后,您需要有一个内部包装
<div>
,您可以将其设置为position:absolute;
and bottom:0;
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. 结合使用这将导致外部div的内容位于其底部,并且所有溢出都将从顶部开始滚动,我想这就是您所追求的。
I've done a quick demo for you using JSFiddle . 我已经使用JSFiddle为您做了一个快速演示 。 The demo uses text as the content, but it would work equally well with images inside the inner div.
该演示使用文本作为内容,但它与内部div中的图像同样适用。
Hope that helps. 希望能有所帮助。
使用min-width
和min-height
而不是width
和height
<div style="min-width:10px;min-height:10px"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.