我怎样才能把我的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>

​

结果：浏览器中的图像

标题是重叠的div的权利，在它之上，当我减少视频。当我将#moi的高度改为80 to时，就出现了这个问题。

希望有人能帮我。谢谢=)

Answer 1

您可以使用flex框容器，也可以使用css网格生成两列。

网格面积: item1，item2 item1，item2；