帖子调整大小和位置。 CSS

时间:2015-04-15 18:56:58

标签: html css layout

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

1 个答案:

答案 0 :(得分:1)

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

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

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

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