如何將我的箱子交錯排列在其他箱子下面？

Question

我對 HTML 和 CSS 還很陌生。

我有這 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;
}

And here my HTML is.
<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