Question

我在制作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;
}

Answer 1

我建议您先了解Flexbox为您做什么的基础知识：Flexbox。除此之外，您可以尝试通过设置图像保持类来使用display：flex。公平警告，如果您关心跨浏览器功能，请确保您尝试捕获的受众支持flex。你可以看一下：can I use。

社区建议的JS库（请参阅您的评论）将为您利用此类功能。我还要说，虽然这些库可能很强大，但只要它们实现了您想要的功能，它们就会起作用，所以花些时间探索Masonry和Isotope以查看它们是否为您提供了解决方案

我最近也发现了一个关于Flex Box的好读物： A Visual Guide to CSS3 Flexbox Properties 框，你可能会感兴趣并希望它也有用：）

否则，请告知我们，如果您需要更多帮助，我们会尽力为您提供帮助。

帖子调整大小和位置。 CSS

1 个答案: