Css 将div与同一类水平对齐

过去我使用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标题3
标题2标题4。第1行
第2行
。

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

因此，用户1 div有：title 1-tilte 2

---

用户2 div有：title 3-title 4将

显示：flex添加到类
组

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

为其子女：

.group > div {
    display: flex;
}

默认情况下，启用了
flex
的元素将强制其子元素保持在相同的
行中

我强烈建议您学习flexbox及其所有配置和属性。这是一个很好的例子
 现在浏览30分钟的指南，我现在可以使用flex使它们水平，但是所有标题现在都在同一行上。我希望用户1的所有标题都在一条水平线上，而与用户2相关的所有标题都在一条“新”水平线上。