如何将我的div放在每个人（垂直）旁边的情况下，而不会重叠？

Question

我的div是重叠的，这是我的index.html的代码：

.titlesec {

  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  margin-bottom: 50px;
  padding: 20px;
}

#moi {

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 107px 70px 0 70px;
  height: 80vh;
}

.nom h1 {
  font-family: 'Lato', sans-serif;
  font-size: 130px;
}

.intro {

  margin-top: 150px;
  width: 50%;
  align-self: flex-end;
  line-height: 35px;
  font-size: 23px;
}

    <div id="moi">
        <div class="nom reveal-">
            <h1>Maxime Miquel</h1>
        </div>
        <div class="intro reveal-2" >
            <p >some text no one cares about</p>
        </div>
    </div>
    <div id="one" class="titlesec reveal-2">
        <h1>TITLE</h1>
    </div>
    <div id="formation">
       .........
    </div>

结果：浏览器中的

图像我减少了视线。当我将#MOI的高度更改为80VH时，出现了这个问题。

希望有人可以帮助我。谢谢=）

Answer 1

您可以使用Flex框容器，也可以使用CSS网格制作两列。

网格区域：项目1，item2
item1，item2;