布尔玛瓷砖不默认为水平答案

【问题标题】：Bulma tiles not defaulting to horizontal布尔玛瓷砖不默认为水平
【发布时间】：2020-12-29 04:28:04
【问题描述】：

根据瓷砖上的 Bulma 文档 (https://bulma.io/documentation/layout/tiles/)，我希望以下内容会生成两行水平行，每行两行图像。相反，它会生成一行四张垂直图像，第一张和第二张以及第三张和第四张彼此之间的距离较近。

    <div class="tile is-ancestor">
        <div class="tile is-parent">
            <div class="tile is-child"><img src="{{ site.baseurl }}/res/img/image1.svg"></div>
            <div class="tile is-child"><img src="{{ site.baseurl }}/res/img/image2.svg"></div>
        </div>
        <div class="tile is-parent">
            <div class="tile is-child"><img src="{{ site.baseurl }}/res/img/image3.svg"></div>
            <div class="tile is-child"><img src="{{ site.baseurl }}/res/img/image4.svg"></div>
        </div>
    </div>

我能够通过在 is-parent div 上强制 display: flex 来获得我想要的行为（实际上，这是我所期望的类，而不是 Bulma 设置的 display: block），但我的理解是布尔玛瓷砖默认应该水平布局。是我错了，还是做错了什么？

非常感谢。

【问题讨论】：

标签： css bulma

【解决方案1】：

这样做的正确方法是定义两个带有is-ancestor类的div：

    <div class="tile is-ancestor">
        <div class="tile is-parent">
            <div class="tile is-child"><img src="{{ site.baseurl }}/res/img/image1.svg"></div>
            <div class="tile is-child"><img src="{{ site.baseurl }}/res/img/image2.svg"></div>
        </div>
    </div>
    <div class="tile is-ancestor">
        <div class="tile is-parent">
            <div class="tile is-child"><img src="{{ site.baseurl }}/res/img/image3.svg"></div>
            <div class="tile is-child"><img src="{{ site.baseurl }}/res/img/image4.svg"></div>
        </div>
    </div>

【讨论】：

感谢您的回答！我认为您是对的，这就是它的设置方式；但它仍然为我生成两组垂直对齐的图像。至少目前该解决方法已经足够好了！
这正是它的作用。这不是你要求的吗？
否；我正在寻找两个水平对齐的行，每行两个图像；基本上是一个正方形。这会产生一个垂直的图像列（或技术上两个垂直对齐的行堆叠在一起）。