如果有足够的空间，为什么浮动元素会在较小的分辨率上破坏？

Question

我的浮动元素在宽视口上看起来应该如此，但是当我将它缩小一点（从1920px宽度到大约1100px宽度）时，它们只是打破并垂直堆叠。他们还有足够的空间在那个分辨率下浮动，我似乎无法弄清楚问题是什么。

这是我的HTML：

start

这是我的LESS：

<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>

这就是这些卡在宽视口上的外观：

这是他们在一个较小的视口上看的方式（虽然仍然有足够的空间留在两列）：

看起来它是父“内联块”元素与视口宽度一起缩小，即使它的位置是绝对的并且它周围仍有很大的空间。

如果该元素没有足够的空间，我怎么能阻止它缩小？

Answer 1

  

（...）虽然仍有足够的空间留在两列

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

我建议找一种不同于你现在使用的翻译技巧的中心方式，或者在突破点之上/之下添加一些媒体查询。