本文目錄導(dǎo)讀：

1. HTML結(jié)構(gòu)設(shè)置
2. CSS樣式實(shí)現(xiàn)

利用CSS布局將四個(gè)div元素分為兩行

在網(wǎng)頁設(shè)計(jì)中，我們經(jīng)常需要將多個(gè)塊元素（如div）按照一定的布局排列，本文將指導(dǎo)你如何利用CSS將四個(gè)div元素分成兩行。

HTML結(jié)構(gòu)設(shè)置

我們需要在HTML中創(chuàng)建四個(gè)div元素，每個(gè)元素包含一些內(nèi)容，基本的HTML結(jié)構(gòu)可能如下所示：

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
</div>

CSS樣式實(shí)現(xiàn)

我們將使用CSS來控制這些div元素的布局，使其分為兩行，有多種方法可以實(shí)現(xiàn)這一目標(biāo)，以下是其中一種常見且簡(jiǎn)單的方法：

.container {
  display: flex; /* 使用Flex布局 */
  flex-direction: row; /* 子元素水平排列 */
}
.box {
  width: 50%; /* 每個(gè)box占據(jù)容器的一半寬度 */
  margin-bottom: 10px; /* 為每個(gè)box添加底部間距 */
}
/* 可以添加媒體查詢以適應(yīng)不同屏幕尺寸 */
@media (max-width: 768px) { /* 當(dāng)屏幕寬度小于或等于768px時(shí) */
  .box { /* 將每個(gè)box轉(zhuǎn)為獨(dú)占一行 */
    width: 100%; /* 每個(gè)box占據(jù)整行寬度 */
  }
}

在這個(gè)例子中，我們使用了Flex布局來輕松控制子元素的排列方式，默認(rèn)情況下，四個(gè)div元素會(huì)水平排列成一行，但當(dāng)屏幕寬度小于或等于設(shè)定的閾值時(shí)（例如768px），媒體查詢將使得每個(gè)div元素獨(dú)占一行，這種響應(yīng)式設(shè)計(jì)可以確保布局在不同屏幕尺寸下都能良好地展示，通過調(diào)整width和margin屬性，你可以進(jìn)一步微調(diào)每個(gè)div元素的布局和間距。