CSS 将 div 移动到同一行

Question

我有这个布局，并且想将第二列移动到同一行。所以两个带有 1 的 div 位于同一行。是否可以使用变换以外的其他方法来做到这一点：

translateY(calc(-100% + 102px));

还有其他方法可以让div填充起来吗？

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.col {
  display: flex;
  flex-direction: column;
  gap: 3px
}

.rev {
  flex-direction: column-reverse;
  transform: translateY(-100%);
}

.row {
  display: flex;
  flex-direction: row;
  gap: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  display: inline-block;
  color: white;
  text-align: center;
  line-height: 100px;
}

<div class="row">
  <div class="col">
    <div class="box red">1</div>
    <div class="box blue">2</div>
    <div class="box green">3</div>
  </div>
  <div class="col rev">
    <div class="box red">1</div>
    <div class="box blue">2</div>
    <div class="box green">3</div>
    <div>X</div>
  </div>
</div>

这是一个链接https://jsfiddle.net/nhpeurz5/

Answer 1

使行的高度等于

100px

，你就会得到你想要的

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.col {
  display: flex;
  flex-direction: column;
  gap: 3px
}

.rev {
  flex-direction: column-reverse;
}

.row {
  display: flex;
  flex-direction: row;
  gap: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100px;
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  color: white;
  text-align: center;
  line-height: 100px;
  box-sizing: border-box;
}

<div class="row">
  <div class="col">
    <div class="box red">1</div>
    <div class="box blue">2</div>
    <div class="box green">3</div>
  </div>
  <div class="col rev">
    <div class="box red">1</div>
    <div class="box blue">2</div>
    <div class="box green">3</div>
    <div>X</div>
  </div>
</div>