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

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