放置div块

Question

请告诉我有3个div块。如何将div 3放在div 1下？ 由于div 3提交了表单，因此无法更改放置块的位置。

.div1 {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

.div2 {
  width: 100px;
  height: 500px;
  border: 1px solid;
}

.div3 {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

<div style="display:flex;">
  <div class="div1">
    div1
  </div>
  <div class="div2">
    div2
  </div>
</div>
<div style="display:flex;">
  <div class="div3">
    div3
  </div>
</div>

Answer 1

像这样在一个<div></div>中合并div1和div3：

<div style="display:flex;">
  <div>
    <div class="div1">
      div1
    </div>
    <div class="div3">
      div3
    </div>
  </div>
  <div class="div2">
    div2
  </div>
</div>

Answer 2

您好，Game Eagle，

我建议看一下CSS-grid吗？这使您可以重新安排网站上的内容。

特别是网格模板区域，它使您可以定义内容区域，然后告诉内容它们属于哪个区域。

一个很好的参考可能会很方便： https://css-tricks.com/snippets/css/complete-guide-grid/

希望这会有所帮助！

Answer 3

这绝对是CSS Grid的工作。看看这个演示。

.parent {
  display: grid;
  grid-template-rows: repeat(2, 100px);
  grid-template-columns: 100px 500px;
}

.parent > div {
  border: 1px solid;
}

.div2 {
  height: 500px;
  width: 100px;
}

<div class="parent">
  <div class="div1">
    div1
  </div>
  <div class="div2">
    div2
  </div>
  <div class="div3">
    div3
  </div>  
</div>