将div与同一类水平对齐

Question

过去，我使用float将div的水平对齐，但是现在我要生成多个具有相同“类”的div，因此float不再将其水平对齐。

如果我将位置设置为绝对，则它们会彼此堆叠。 如果我将位置设置为相对，它们将垂直对齐。

我似乎无法掌握如何解决此问题，因为它们具有相同的类。

这是我的输出：

<div class="group">

<div class = "user2">title1</div><div class = "user1">title3</div> 
 <div class = "user2">title2</div><div class = "user1">title4</div> .     <div class="line1">line1<br></div><div class="line2">line2<br> .     </div>
  </div>

我希望“标题”彼此垂直对齐。

因此，用户1 div具有：标题1-倾斜2
用户2 div具有：标题3-标题4

Answer 1

将display: flex添加到类group中。

.group {
   display: flex;
   flex-direction: column;
}

及其子代：

.group > div {
    display: flex;
}

默认情况下，启用了flex的元素将强制其子元素停留在同一row中。

我强烈建议您学习flexbox及其所有配置和属性。这是一个很棒的font。