2 个容器与其他 2 个容器在水平线上垂直对齐

Question

好的，所以我想将 2 个垂直容器与 css 中的其他 2 个容器放在水平线上，并希望使其响应。这是我想做的一个视觉示例：

有人可以举例说明如何解决这个问题吗？

Answer 1

使用 flex 的示例。

.top,
.bottom,
.middle,
.right {
  background-color: #3a3b3c;
  border-radius: 5px;
}

.wrapper {
  display: flex;
}

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

.top {
  height: 200px;
}

.bottom {
  height: 100px;
  margin-top: 10px;
}

.left, 
.middle,
.right {
  width: calc(100%/3);
  margin: 0 10px;
}

<div class="wrapper">
  <div class="left">
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

2 个容器与其他 2 个容器在水平线上垂直对齐

2 containers aligned vertically in horizontal line with the other 2 containers

html

css