将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不同，这个问题的“文章”安排不同。有人有这个主意吗？

Answer 1

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

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

此布局的flexbox没有任何问题。

不需要使用伪元素。

＆＃13;

＆＃13;

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

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以尝试使用CSS3列。但在这种情况下，它在信息流中看起来有点不同。

.article-container {
  -webkit-columns: 2; /* Chrome, Safari, Opera */
  -moz-columns: 2; /* Firefox */
  columns: 2;
}

<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>

Answer 4

这实际上非常简单。您只需将.article设置为display: inline-block;，然后将<br>中的第二个与width: 49%;或.article上的.article { display: inline-block; width: 49%; }进行逐步搜索适当列的影响

＆＃13;

＆＃13;

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

＆＃13;

    [DllImport("user32.dll")]
    [return: MarshalAs(UnmanagedType.Bool)]
    static extern bool GetWindowRect(IntPtr handle, out WindowRect rect);
    [StructLayout(LayoutKind.Sequential)]
    private class WindowRect
    {
        public int Left;
        public int Top;
        public int Right;
        public int Bottom;
    }

＆＃13;

＆＃13;

＆＃13;