在 HTML 中垂直列出元素 - CSS

在 HTML 中，有时需要将元素垂直列出以形成某种布局。CSS 提供了几个方法来实现这一点。

使用 display:flex

使用 display:flex 可以轻松地将元素垂直排列。

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

以上代码将容器内的所有子元素按照垂直方向排列。使用 flex-direction 属性设置排列方向。

使用 position 和 top 属性

将元素的 position 属性设置为 absolute，然后手动调整每个元素的 top 属性，可将元素垂直排列。

.container {
  position: relative;
}

.container > div {
  position: absolute;
  top: 0;
}

以上代码将容器内的所有子元素以相对于容器的绝对位置进行排列。

使用 display:table-cell

使用 display:table-cell 可以将元素垂直排列，类似于表格中的单元格。

.container {
  display: table;
}

.container > div {
  display: table-cell;
  vertical-align: top;
}

以上代码将容器内的所有子元素按照垂直方向排列，并使用 vertical-align 属性设置其垂直对齐方式。

总之，以上这些方法可以使您轻松垂直排列元素，具体使用哪种方法可以根据具体需求和浏览器兼容性来选择。