css - 图像/div 在加载时随机重叠

Question

我有一个使用 Zurb 的 Foundations 框架构建的 3x3 网格，在加载时这些框有时会相互重叠。正常加载的图像数量和不正常加载的图像数量是完全随机的。有时它只是一张图片，有时是所有图片，等等。当您从 http://而不是本地查看网站时，它也经常发生。看看下面的图片。

这些盒子是响应式的，当浏览器的宽度变小到 1200 像素时，它们的尺寸就会减小。因此，每个盒子的静态高度不是一个选项。它们确实保持相同的比例 (4:3)。

如何使它们不相互重叠？

我认为问题在于浏览器渲染框的速度比渲染每个图像的速度快 - 因此没有考虑高度。

---

我这部分的代码是这样的

<div class="row">
    <div class="large-12 large-centered columns">
        <div id="grid" class="row">

            <figure class="small-6 medium-4 columns item" data-groups='["all", "app"]'>
                <img src="images/portfolio/nos/sp-item.jpg" alt="img01"/>
                <figcaption>
                    <h2><span>NOS</span></h2>
                    <p>5 maanden werken aan een nieuwe NOS app</p>
                    <a href="portfolio/nos-casestudy.html"  title="bekijk dit project"></a>
                </figcaption>           
            </figure>

            <!-- 8 more figures like the one above, each is one box -->

        </div>
    </div>
</div>

Answer 1

我认为这是 Foundation block 状网格的经典案例。只需将类从 large-3 更改为 large-block-grid-3。

因此您的代码将如下所示:

<div class="row">
  <div class="large-block-grid-12 large-centered columns">
    <div id="grid" class="row">

        <figure class="small-block-grid-6 medium-block-grid-4 columns item" data-groups='["all", "app"]'>
            <img src="images/portfolio/nos/sp-item.jpg" alt="img01"/>
            <figcaption>
                <h2><span>NOS</span></h2>
                <p>5 maanden werken aan een nieuwe NOS app</p>
                <a href="portfolio/nos-casestudy.html"  title="bekijk dit project"></a>
            </figcaption>           
        </figure>

        <!-- 8 more figures like the one above, each is one box -->

    </div>
</div>

您可以了解有关 Foundation 区 block 网格的更多信息 here