我在制作HTML页面时遇到问题,我在其中放置了不同大小的图片。图像宽度需要相同,高度也不同。当顶部后期图像的高度较小时,我希望下部后期图像向上移动以覆盖空白区域。您可以通过查看以下图片来更好地理解:
这就是我所做的
(请查看图片链接)
http://i.stack.imgur.com/An2ca.png
这就是我想要的
http://i.stack.imgur.com/dQzFH.png
我希望你现在能理解。
我的CSS代码如下:
.posts{
width:80%;
max-width:951px;
min-height:990px;
border:0px solid black;
float:right;
margin-left:10px;
}
.post{
width:300px;
min-height:100px;
float:left;
margin-left:10px;
margin-top:10px;
border:0px solid green;
vertical-align:text-top !important;
}
.post img{
width:100%;
max-width:290px;
height:auto;
transition:all 1s ease;
opacity:1.0;
}
.post img:hover{
opacity:0.7;
}
答案 0 :(得分:1)
我建议您先了解Flexbox为您做什么的基础知识:Flexbox。除此之外,您可以尝试通过设置图像保持类来使用display:flex。公平警告,如果您关心跨浏览器功能,请确保您尝试捕获的受众支持flex。你可以看一下:can I use。
社区建议的JS库(请参阅您的评论)将为您利用此类功能。我还要说,虽然这些库可能很强大,但只要它们实现了您想要的功能,它们就会起作用,所以花些时间探索Masonry和Isotope以查看它们是否为您提供了解决方案
我最近也发现了一个关于Flex Box的好读物: A Visual Guide to CSS3 Flexbox Properties 框,你可能会感兴趣并希望它也有用:)
否则,请告知我们,如果您需要更多帮助,我们会尽力为您提供帮助。