css怎么两列文字竖排

实现CSS两列文字竖排 我们要在网页中实现两列文字竖排的效果，即将左右两列的文字都竖着排列。这只需要简单的CSS就可以完成，下面是具体的步骤和代码实现： 1. HTML结构 我们需要一个父容器，里面包含两个子容器，一个是左边的容器，一个是右边的容器。每个子容器里面的文字都用p标签包裹。

<div class="column-wrap">
  <div class="column-left">
    <p>左边的文字内容</p>
  </div>
  <div class="column-right">
    <p>右边的文字内容</p>
  </div>
</div>

2. CSS样式 我们需要给两个子容器设置宽度和高度，同时也需要将竖排文字的方向垂直方向上。这里我们使用transform和rotate来实现：

.column-wrap{
  display: flex;
}

.column-left,.column-right{
  width: 50%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.column-left{
  transform-origin: left bottom;
  transform: rotate(-90deg);
}

.column-right{
  transform-origin: right bottom;
  transform: rotate(90deg);
}

.column-left p,.column-right p{
  margin: 0;
}

在这个CSS代码中，我们首先使用flex布局，将两个子容器横向排列。然后给每个子容器设置宽度和高度，使它们能够呈现一个矩形的形状。接着，我们使用transform和rotate属性，将文字方向进行旋转。其中，transform-origin属性用来指定旋转的中心点。最后，我们还需要去除p标签在默认情况下的margin。 这样，我们就成功地实现了CSS两列文字竖排的效果。通过这种方式，我们可以让网页的排版更加多样化，也能够让文字更加美观地呈现出来。