将 div 拆分为 2 列

Question

我有这样的代码：

 <div class="article-container">
  <div class="article">
    <h3>title1</h3>
    <p>article1</p>
  </div>
  <div class="article">
    <h3>title2</h3>
    <p>article2</p>
  </div>
  <div class="article">
    <h3>title3</h3>
    <p>article3</p>
  </div>
  <div class="article">
    <h3>title4</h3>
    <p>article4</p>
  </div>
</div>

我想将这个 1 行列转换为 2 列，如下所示：

我已经尝试过使用这段代码，但是有什么不同的方法来拆分 div 吗？

 .article-container {
  display: flex;
  flex-wrap: wrap;
}

.article {
  flex-grow: 1;
  flex-basis: 50%;
}

.article:after {
  content: "";
  flex: auto;
}

 <div class="article-container">
  <div class="article">
    <h3>title1</h3>
    <p>article1</p>
  </div>
  <div class="article">
    <h3>title2</h3>
    <p>article2</p>
  </div>
  <div class="article">
    <h3>title3</h3>
    <p>article3</p>
  </div>
  <div class="article">
    <h3>title4</h3>
    <p>article4</p>
  </div>
</div>

它与另一个问题 Split Div Into 2 Columns Using CSS 不同，这个问题的“文章”排列是不同的。有人知道吗？

原文由 Andra 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这种布局的 flexbox 没有错。

没有必要使用伪元素。

 .article-container {
  display: flex;
  flex-wrap: wrap;
}

.article {
  flex: 0 0 50%;
  padding: 10px;
}

* {
  margin: 0;
  box-sizing: border-box;
}

 <div class="article-container">
  <div class="article">
    <h3>title1</h3>
    <p>article1</p>
  </div>
  <div class="article">
    <h3>title2</h3>
    <p>article2</p>
  </div>
  <div class="article">
    <h3>title3</h3>
    <p>article3</p>
  </div>
  <div class="article">
    <h3>title4</h3>
    <p>article4</p>
  </div>
</div>

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是使用 float/clear 的一种方法：

 .article {
  float: left;
  width: 50%;
}

.article:nth-child(odd) {
  clear: left;
}

 <div class="article-container">
  <div class="article">
    <h3>title1</h3>
    <p>article1</p>
  </div>
  <div class="article">
    <h3>title2</h3>
    <p>article2</p>
  </div>
  <div class="article">
    <h3>title3</h3>
    <p>article3</p>
  </div>
  <div class="article">
    <h3>title4</h3>
    <p>article4</p>
  </div>
</div>

原文由 j08691 发布，翻译遵循 CC BY-SA 3.0 许可协议