html - 如何在不影响 div 更改的情况下将内容放置在绝对位置元素下方

Question

我有这样的html div

div A            

div B

Div D
div c
Div E

我想要这样的结构

div A           Div C

div B           div D
Div E

我做了

.c {
    top: 0;
    right: 220px;
    position: absolute;
}

现在 div c 在顶部，接下来我想要 Div D

.d {
top: 566px;
position: absolute;
right: 291px;
}

我可以调整这个，但问题是当我从 Div c 扩展内容时它会重叠到 div D？我如何将 Div D 移动到 Div C 下？请帮助

这是我的代码

<div>
  <ul>
    <li>
      <h3>Our Team</h3>
    </li>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li style="top:20px; position:absolute; right:120px">e</li>
    <li style="top:20px; position:absolute; right:120px">f</li>
  </ul>
</div>

Answer 1

您可以使用 CSS Grid 代替:

Complete Grid Guide

首先定义您的网格模板区域:

grid-template-areas: "i1 i3" ". ." "i2 i4" "i5 .";
grid-template-rows: repeat(4,1fr);

grid-template-areas:通过引用由 grid-area 属性指定的网格区域的名称来定义网格模板

每个“”指的是行。

例如:第一行有两列:

1- i1 从第一行取 2 中的 1。

2- i2 从第一行取 2 中的 1。

grid-template-rows: repeat(4,1fr):将确保所有行具有相同的高度(即使是空行)。

要将此区域应用到 div:

1- 在 html 中定义 div:

<div class="item i1">Div A</div>

2- 添加到 css:

.i1 { grid-area: i1}

等等。

工作演示:

.grid {
  display: grid;
  grid-template-areas: "i1 i3" ". ." "i2 i4" "i5 .";
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 10px;
  margin: 25px;
}

.i1 {
  grid-area: i1
}

.i2 {
  grid-area: i2
}

.i3 {
  grid-area: i3
}

.i4 {
  grid-area: i4
}

.i5 {
  grid-area: i5
}

.item {
  min-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
}

<div class="grid">
  <div class="item i1">Div A</div>
  <div class="item i2">Div B</div>
  <div class="item i3">Div C</div>
  <div class="item i4">Div D</div>
  <div class="item i5">Div E</div>
</div>