css两排文字上下布局

发表于前端技术学习版块 css,教程

在前端开发中，CSS样式的排版总是非常重要的一点，其中文本排版布局也是重点之一。今天我们来讲一下使用CSS实现两排文字上下布局的方法。代码演示： <!DOCTYPE html&g

在前端开发中，CSS样式的排版总是非常重要的一点，其中文本排版布局也是重点之一。今天我们来讲一下使用CSS实现两排文字上下布局的方法。

代码演示：
<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        width: 200px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>第一排文字</p>
      <p>第二排文字</p>
    </div>
  </body>
</html>

如上所示，我们使用了flex布局，通过flex-direction: column的设置实现了两排文字上下排列，而justify-content: space-between则使两排文字平均间距分布，且维持了容器的高度。这样，两排文字就可以非常好的上下排列了。

当然，我们也可以通过其他一些方法实现这种效果，比如通过absolute和relative实现，但是相对于flex布局而言，需要使用的代码比较多，而且兼容性方面也会有一定问题。因此，建议大家在实现这种两排文字上下布局的时候，可以优先考虑使用flex布局来实现。

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。