CSS:在没有固定/绝对定位的情况下，将两个块堆放在垂直矩形旁边？

Question

在这里，https://jsfiddle.net/w39znn58/，我做了一个艰苦的草图与浮动和绝对定位，我试图用干净和现代的CSS最有可能的使用吗？还是网格？

​

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>

​

我想要两个块，一个在垂直矩形的顶部堆叠，没有固定/绝对的定位，也不为.square div添加div包装。

​

​

Answer 1

您可以使用Grid来完成这个任务。

​

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

下面是一个简单的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 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>

​