This question already has answers here:
Is it possible for flex items to align tightly to the items above them?
(5个答案)
两年前关闭。
我很困惑如何获得像这样的响应图像网格。。
提前谢谢。我试过很多StackOverflow答案,但都没有成功
现在我有这样的布局。。。
html - 如何使用display:flex进行适当的响应式Image Grid View-LMLPHP
但我希望我的布局像这样。。。
html - 如何使用display:flex进行适当的响应式Image Grid View-LMLPHP
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/

10-12 00:08
查看更多