如何将我的盒子交错排列在其他盒子下面？

Question

我有这 5 个盒子，但我想移动顶部盒子下方的 2 个盒子，以便它们之间的空间对齐。 看图

这是我的CSS：

.box a{
    margin-left: 150px;
    margin-top: 10px;
    text-align: center;
    display: inline-block;
    background: yellow;
    padding: 15px 30px;
    border: 1px solid green;
    width: 150px;
    height: 40px;
    text-decoration: none;
    color: lightskyblue;
}

这是我的 HTML：

<div class="box">
            <a th:href="@{info}">Info page</a>
            <a th:href="@{responsibility}">Responsibility page</a>
            <a th:href="@{what_we_do}">What we do</a>
            <a th:href="@{profile}">Profile</a>
            <a th:href="@{#}">Picture to come</a>
        </div>

Answer 1

您应该将不同 div 中的行分开 像这样：

<div class="box">
       <div class="row1">
            <a th:href="@{info}">Info page</a>
            <a th:href="@{responsibility}">Responsibility page</a>
            <a th:href="@{what_we_do}">What we do</a>
       </div>
       <div class="row2">
            <a th:href="@{profile}">Profile</a>
            <a th:href="@{#}">Picture to come</a>
       </div>
   </div>

使第二行变得灵活并给它

justify-content: space-between

，如下所示：

.row2{
display:flex;
justify-content: space-between
}

像这样，灵活的 div 子元素将以灵活的方式占用该 div 空间，并且它将根据父 div 的大小进行调整

我会为您添加更多有关“flex”显示的信息，让您更深入地了解它：

https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox