This question already has answers here:
Is it possible for flex items to align tightly to the items above them?
(5个答案)
两年前关闭。
我很困惑如何获得像这样的响应图像网格。。
提前谢谢。我试过很多StackOverflow答案,但都没有成功
现在我有这样的布局。。。

但我希望我的布局像这样。。。

Html代码:
CSS代码
(5个答案)
两年前关闭。
我很困惑如何获得像这样的响应图像网格。。
提前谢谢。我试过很多StackOverflow答案,但都没有成功
现在我有这样的布局。。。
但我希望我的布局像这样。。。
Html代码:
<div class="makeExploreCenter">
<div class="explorePost">
<img src="skyline-buildings-new-york-skyscrapers.jpg" />
<div class="likesdetails">
<div class="propicthumnail">
</div>
</div>
</div>
<div class="explorePost">
<img src="url.jpg" />
<div class="likesdetails">
<div class="propicthumnail">
</div>
</div>
</div>
<div class="explorePost">
<img src="ymbpp1l.jpg" />
<div class="likesdetails">
<div class="propicthumnail">
</div>
</div>
</div>
<div class="explorePost">
<img src="skyline-buildings-new-york-skyscrapers.jpg" />
<div class="likesdetails">
<div class="propicthumnail">
</div>
</div>
</div>
<div class="explorePost">
<img src="url.jpg" />
<div class="likesdetails">
<div class="propicthumnail">
</div>
</div>
</div>
<div class="explorePost">
<img src="ymbpp1l.jpg" />
<div class="likesdetails">
<div class="propicthumnail">
</div>
</div>
</div>
</div>
CSS代码
.makeExploreCenter{
width: 90%;
margin: 0 auto;
display: flex;
flex-wrap:wrap ;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
.explorePost{
text-align: center;
margin: 5px;
max-width: 300px;
min-width: 300px;
align-self: flex-start;
background: #545454;
}
.explorePost img{
max-height: 60vh;
max-width: 100%;
max-height: 70vh;
}
.likesdetails{
width: 100%;
height: 44px;
background: #FAFAFA;
margin-top: -3px;
overflow: auto;
overflow: hidden;
display: flex;
}
最佳答案
使用像bootstrap这样的框架将使生活更轻松。
Bootstrap网格系统可以很容易地实现这一点。
关于html - 如何使用display:flex进行适当的响应式Image Grid View ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40846872/