在平原CSS中移动中的DIV之间的DIV

Question

我试图将DIV放置在DIVS之间以进行移动屏幕。

我不想使用JavaScript，只是普通CSS。有没有办法实现它？

我正在尝试使用Flexbox Order，但无法实现我的目标。

.parent {
    display: flex;
    justify-content: flex-start;
}

.left {
  background-color: yellow;
  padding: 20px;
  width: 50%;
}

.left-1 {
  background-color: greenyellow;
  padding: 20px;
}

.left-3 {
  background-color: gray;
  padding: 20px;
}

.right {
  background-color: cyan;
  padding: 20px;
  width: 50%;
}

<section class="parent">
  <div class="left">
    <div class="left-1">1</div>
    <div class="left-3">3</div>
  </div>
  <div class="right">2</div>
</section>

Answer 1

实现所需结果的最简单方法是使用CSS网格布局，该布局允许所有元素是兄弟姐妹，以及媒体问题：

/* simple reset to ensure all element sizes are calculated the same way,
   and with the same base-styles: */
*,
 ::before,
 ::after {
  box-sizing: border-box;
  font-size: 16px;
  font-family: system-ui, sans-serif;
  font-weight: 400;
  margin: 0;
  padding: 0;
}

.parent {
  /* using CSS Grid for layout: */
  display: grid;
  /* setting a gap between adjacent-elements,
     (shorthand for 'row-gap' and 'column-gap') */
  gap: 0.5em;
  /* defining named areas for the contents to be positioned,
     based on rows; the first row comprises of one area named:
     'leftTop' and the second named 'main'; the second row
     has 'leftLower' and 'main'; the reason that 'main' appears
     twice is that we want the element in that position to span
     across both rows: */
  grid-template-areas:
    "leftTop main"
    "leftLower main";
  /* setting height and width to be full-screen: */
  width: 100vw;
  height: 100vh;
  /* setting padding, so that there is a visible gap between the
     elements and the page's borders (obviously, adjust to taste): */
  padding: 0.5em;
}

/* writing the common styles shared by all child-elements into the same
   place for ease of maintenance/updates: */
.parent div {
  padding: 20px;
}

/* the left-1 and left-2 elements will be laid out automatically according
   to their order in the DOM, once any grid-items (the 'left-1', 'left-2',
   and 'right' elements) have been allocated their specific places according
   to the author's design: */
.left-1 {
  background-color: greenyellow;
}

.left-3 {
  background-color: gray;
}

.right {
  background-color: cyan;
  /* here we explicitly place this element into the named (but not quoted)
     main grid-area: */
  grid-area: main;
}

/* when the screen falls below 450px in width (obviously adapt to your own
   requirements): */
@media screen and (max-width: 450px) {
  /* the grid-template-areas are redefined into three single-column rows: */
  .parent {
    grid-template-areas: "topLeft" "main" "lowerLeft";
  }
}

<section class="parent">
  <!-- removed the wrapper 'left' column element, in order to allow the
       'right' element to be positioned between the 'left-1' and 'left-3'
       elements when the screen-size changes: -->
  <div class="left-1">1</div>
  <div class="left-3">3</div>
  <div class="right">2</div>
</section>

JS小提琴演示。

参考：

• box> box-sizing 。
• display 。
• font-family。
• 。
• gap。
• grid> grid> grid-template-areas-areas。
• <
• @media QUERIES。
• <

参考书目：

• “ 网格的完整指南。
• “
• “ css noreferrer“> css grid layout 。