[分享]css两列文字竖排

CSS是前端开发中必不可少的技术之一。它可以美化网页的外观，使得网页更加美观、舒适。其中，两列文字竖排也是很常见的一种布局。接下来，我将使用pre标签来展示代码，以便更好地理解。.wrapper{ d...

CSS是前端开发中必不可少的技术之一。它可以美化网页的外观，使得网页更加美观、舒适。其中，两列文字竖排也是很常见的一种布局。接下来，我将使用pre标签来展示代码，以便更好地理解。

.wrapper{
    display: flex;
    height: 400px;
}

.column1{
    width: 50%;
    background-color: yellow;
}

.column2{
    width: 50%;
    background-color: blue;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.column2 p{
    display: inline-block;
    writing-mode: vertical-rl;
    text-orientation: upright;
} 

在这段代码中，我们首先创建了一个名为wrapper的外层容器。接下来，我们使用了Flexbox布局，并将容器的高度设置为400像素。接着，我们创建了两个名为column1和column2的子容器，用于存放我们的两列文本。其中，column1的宽度为50%，背景色为黄色；而column2的宽度同样也为50%，背景色为蓝色。我们使用了Flexbox布局，并设置了它的方向为垂直方向，以便让文本竖排显示。最后，我们将column2中的p标签展示方式设置为行内块级元素，同时也设置了文本方向。

这就是CSS两列文字竖排的实现方式。通过上述代码的示例，我们可以清晰地看到CSS的强大和灵活性，它可以帮助我们创造出各种不同的网页布局和效果。希望这篇文章能够帮助大家更好地了解这种常见的布局方式。