如何将一个div分成两行答案

【问题标题】：How to split a div in two separate rows如何将一个div分成两行
【发布时间】：2021-01-13 11:28:51
【问题描述】：

我试图使网站具有响应性，并且我有一个包含 6 个 div 的部分，其中包含一个图标和一些文本。在移动模式下，这 6 个 div 位于 flex-direction: column 但在使用@media 的平板电脑/桌面模式下，我试图在一行上显示 3 个 div，然后在另一行上显示下 3 个 div行，这样它们就可以适应了，但是如果不拧我的图标或文本，我就找不到这样做的方法。 HTML 代码是这样的：

<section id="contact">
  <div class="container">
    <div>
      <h1>text</h1>
    </div>
    <div class="items">
      <div class="item">
        <div class="icon">
          <a href="#"><img src=""></a>                    
        </div>
        <div class="info">
          <h1></h1>
        </div>
      </div>

我有 6 个带有项目类的 div，我想在一行显示前 3 个 div 的 class="item" ，在下一行显示另外 3 个。你能帮帮我吗？

【问题讨论】：

您的代码引用缺少一些 div 闭包 (</div>)。

标签： html css

【解决方案1】：

应该这样做，移动设备上每列 1 个项目，超过 450 像素的每列 3 个项目，网格也可以这样做。

.flex-container {
  display: flex;
  flex-direction: column;
}

.item {
  background-color: #333;
  border: 1px solid #fff;
  height: 200px;
}

@media (min-width: 450px) {
  .flex-container {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .item {
    flex: 0 0 33%;
  }
}

<div class="flex-container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

【讨论】：