html - 如果有足够的空间，为什么我的 float 元素会在较小的分辨率下中断？

Question

我的 float 元素在宽视口(viewport)上看起来应该是这样的，但是当我将它缩小一点(从 1920 像素宽度到大约 1100 像素宽度)时，它们只是分开并垂直堆叠。有足够的空间让他们在那个分辨率下仍然 float ，我似乎无法弄清楚问题是什么。

这是我的 HTML:

<div id="page-content" class="page homepage">
    <div id="homepage-cards">

        <div class="homepage-card">
            <img src="{{asset("img/content/web_development.png")}}" alt="web development" />
            <h2>Web development</h2>
        </div>

        <div class="homepage-card">
            <img src="{{asset("img/content/web_development.png")}}" alt="web development" />
            <h2>Web development</h2>
        </div>

        <div class="homepage-card">
            <img src="{{asset("img/content/web_development.png")}}" alt="web development" />
            <h2>Web development</h2>
        </div>

        <div class="homepage-card">
            <img src="{{asset("img/content/web_development.png")}}" alt="web development" />
            <h2>Web development</h2>
        </div>        

    </div>
</div>

这是我的 LESS:

div.page.homepage {
    position: relative;
    background: @skyscrapers no-repeat center center fixed;
    .background-size(cover);
    min-height:1080px;
    z-index:10;
}

div#homepage-cards {
    display:inline-block;
    position:absolute;
    top:40%;
    left:50%;
    .translate(-50%, -50%);

    div.homepage-card {
        display:inline-block;
        text-align:center;
        background-color:#ffffff;
        padding:56px 60px 100px 60px;
        float:left;
        margin-right:30px;
        margin-bottom:30px;
        &:nth-child(2n+2) {
            margin-right:0;
        }
        &:nth-child(3) {
            clear:left;
        }
        h2 {
            margin-top:25px;
            text-transform: lowercase;
            font-weight:bold;
        }
    }

}

这是这些卡片在宽视口(viewport)中的样子:

这是他们在较小的视口(viewport)中的样子(同时仍然有足够的空间留在两列中):

看起来它是父“inline-block”元素随着视口(viewport)宽度一起缩小，即使它的位置是绝对的并且它周围仍然有很多空间。

我怎样才能阻止该元素收缩直到它没有足够的空间？

Answer 1

(...) while still having enough space to stay in two columns

不，他们没有。您已将 #homepage-cards 设置为 left: 50%，这基本上意味着它将是整个视口(viewport)宽度的一半。在那一半里面，没有足够的空间容纳两个人。

我建议找到一种与您现在使用的翻译技巧不同的方式来使它们居中，或者添加一些媒体查询以判断它何时高于/低于断点。