CSS: 将两个方块堆叠在垂直矩形旁边，没有 fixed/absolute 定位？

Question

这里 https://jsfiddle.net/w39znn58/ 我用浮动和绝对定位做了一个硬草图，我试图用干净和现代 CSS 最有可能使用 flex-box 来实现什么？还是网格？

div {
  border: 1px solid black;
  padding: 20px;
  width: 80px;
}

.rectangle {
  height: 82px;
  float: left;
}

.square {
  float: left;
}

.square-2 {
  float: none;
  position: absolute;
  top: 70px;
  left: 130px;
}

<div class="rectangle">Rectangle</div>
<div class="square square-1">Square 1</div>
<div class="square square-2">Square 2</div>

我想要两个块，一个堆叠在另一个垂直矩形旁边，没有 fixed/absolute 定位，也没有为 .square 添加 div 包装器 divs.

Answer 1

这里有一个简单的 flex 解决方案：

* {
 box-sizing:border-box;
}
body {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  /* change the dimension as needed*/
  height: 50vh;
  width:50vw;
  /**/
}

div {
  border: 1px solid black;
  width: 50%;
  text-align:center;
}

.rectangle {
  height: 100%;
}

.square {
  height: 50%;
}

<div class="rectangle">Rectangle</div>
<div class="square square-1">Square 1</div>
<div class="square square-2">Square 2</div>

Answer 2

您可以使用网格:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* creates two columns, can also use 50% 50%, repeat(2, 1fr) or repeat(2, 50%), fr stands for fractions */
}

.grid > div {
  padding: 20px;
  border: 1px solid;
}

.rectangle {
  grid-row: 1/3; /* spans two rows */
}

<div class="grid">
  <div class="rectangle">Rectangle</div>
  <div class="square square-1">Square 1</div>
  <div class="square square-2">Square 2</div>
</div>

Answer 3

CSS 变化：

div {
border: 1px solid black;
padding: 20px;
width: 80px;
display: grid;
}
.rectangle {
height: 82px;
float: left;
}
.square{
height: 20px;
}

<div class="rectangle">Rectangle</div>
<div class="square square-1">Square 1</div>
<div class="square square-2">Square 2</div>

CSS: 将两个方块堆叠在垂直矩形旁边，没有 fixed/absolute 定位？

CSS: Place two blocks stacked next to a vertical rectangle without fixed/absolute positioning?

html

css

flexbox

css-grid