CSS是網頁設計中不可缺少的一部分，能夠幫助我們美化網頁并增加交互性。在網頁設計中，我們經常需要排列一些盒子來展示內容，今天我們來聊一聊如何排列兩行盒子。

首先我們需要創建HTML結構。我們可以使用div標簽來創建兩個外層盒子，并為它們添加類名以便后面的CSS選擇器能夠選中它們。代碼如下：

<div class="container">
<div class="row1">
<p>第一行第一個盒子</p>
<p>第一行第二個盒子</p>
<p>第一行第三個盒子</p>
</div>
<div class="row2">
<p>第二行第一個盒子</p>
<p>第二行第二個盒子</p>
<p>第二行第三個盒子</p>
</div>
</div>

在上面的代碼中，我們創建了一個名為“container”的外層盒子，然后在它內部創建了兩個名為“row1”和“row2”的子盒子，它們分別用來存放第一行和第二行的盒子。每一行中都有三個盒子，分別放置內容。

接著，我們需要為這些盒子添加CSS樣式。我們可以使用以下樣式來排列這些盒子：

.container {
display: flex;
flex-wrap: wrap;
}
.row1,
.row2 {
width: 100%;
display: flex;
}
.container p {
width: calc(100% / 3);
height: 100px;
border: 1px solid black;
}

在上面的代碼中，我們使用了Flexbox布局來排列這些盒子。我們將外層盒子“container”的display屬性設置為“flex”，這樣它內部的所有子元素都會按照Flexbox的規則來排列。接著我們將Flexbox的wrap屬性設置為“wrap”，這樣子元素會按照我們指定的寬度自動換行。

然后我們為“row1”和“row2”兩個子盒子設置了display屬性為“flex”，這樣它們內部的元素也會按照Flexbox的規則來排列。最后，我們給所有p標簽設置了寬度為33.33%，這樣每一行會顯示三個等寬的盒子。

以上就是如何用CSS排列兩行盒子的方法。