时间戳

首页 > 解决方案 > 如何更改两列中三个 div 的顺序？

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

问题描述

我有三个 div，我想按照它们在标记上的显示方式进行排序。

我想先显示一个div ，然后在第一列的下面显示三个。然后在第二列，我只想显示 div two。我当前的 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>

标签： htmlcssflexbox

解决方案

由于您width的 s 是在 CSS 中定义的，因此在这里
不使用flexsystem 可能更容易：

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

希望能帮助到你。

推荐阅读