如何在两列中更改三个div的顺序？

Question

我有三个div，我想以不同于它们在标记上出现的方式进行排序。

我想首先显示div 一个，然后在第一列下方显示三个。然后在第二列，我想只显示div 两个。 我目前的CSS设置无法实现。如何将div 两个移到第二列？

.main {
  width: 400px;
}
.box {
  width: 50%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.box>* {
    flex: 1 1 100%;
    border: 1px solid red;
}
.box>div:first-child{
    flex: 1 1 70%;
    width: 70% !important;
}

.box>div:nth-child(2) {
    flex: 1 1 30%;
    order: 3;
    width: 30%;
    float: right;
}

.box>div:nth-child(3) {
    flex: 1 1 70%;
    width: 70%;
}

<div class="main">
  <div class="box">
    <div>One</div>
    <div>Two
      <p>paragraph</p>
    </div>
    <div>Three</div>
  </div>
</div>

Answer 1

由于您的width已在CSS中定义， 也许不使用flex系统在这里更容易：

.main {
  width: 400px;
}

.box {
  position: relative;
  width: 50%;
}

.box > * {
  box-sizing: border-box;
  border: 1px solid red;
  width: 70%;
}

.box>div:nth-child(2) {
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
}

<div class="main">
  <div class="box">
    <div>One</div>
    <div>Two
      <p>paragraph</p>
    </div>
    <div>Three</div>
  </div>
</div>

希望它有所帮助。

Answer 2

你试图用动态高度来做这件事。不幸的是，如果你这样做，浏览器无法确定它应该将第二个孩子包装到下一列的时间和地点。这一切都适合一列，因为你还没有真正告诉它应该有多高的弹性容器。添加高度并交换flex: 1 1 auto和flex: 1 1 100%的flex声明会创建包装到您似乎想要实现的第二列。

.main {
  width: 400px;
}
.box {
  width: 50%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  
  /* without this, it doesn't wrap to
     a second column.  You can change
     this to whatever height best fits
     your requirements. */
  height: 100px;
}
.box>* {
    flex: 1 1 auto;
    width: 70%;
    box-sizing: border-box;
    border: 1px solid red;
}
.box>div:nth-child(2) {
    flex-basis: 100%;
    width: 30%;
    order: 3;
}

<div class="main">
  <div class="box">
    <div>One</div>
    <div>Two
      <p>paragraph</p>
    </div>
    <div>Three</div>
  </div>
</div>

Answer 3

我使用表格方法你也可以通过使用网格布局来做到这一点，但是我使用了表格标签，因为网格css可能在Internet Explorer中出现问题，因为IE不支持网格css。

＆＃13;

＆＃13;

.main {
      width: 400px;
    }
    .box {
      width: 50%;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
    }
    .box td {
        flex: 1 1 100%;
        border: 1px solid red;
    }
 

＆＃13;

 <div class="main">
      <div class="box">
      <table>
      <tr>
        <td>One</td>
        <td rowspan=2>Two
          <p>paragraph</p>
        </td>
        
        </tr>
        <tr>
        <td>Three</td>
        </tr>
        </table>
      </div>
    </div>
    

＆＃13;

＆＃13;

＆＃13;