css如何实现3竖排垂直对齐

在网页开发中，我们经常会遇到需要三栏垂直对齐布局的需求，这时候我们可以利用 CSS 来实现该布局。

首先我们需要 HTML 结构：

div class="container">
      div class="left">
    左栏/div>
      div class="middle">
    中栏/div>
      div class="right">
    右栏/div>
    /div>

其中，我们给每个栏目都添加了一个 class，用于后面的 CSS 样式设计。

接下来我们需要定义 container 和三个栏目的 CSS 样式：

.container {
      display: flex;
      align-items: center;
}
.left, .right {
      width: 20%;
}
.middle {
      flex: 1;
}
    

在 container 的样式中，我们使用了 display：flex 和 align-items：center，将三栏列成一排，并垂直居中显示。

左栏和右栏的样式是固定宽度为 20%，中栏的样式使用了 flex：1，自适应宽度为剩余空间。

这样，我们就成功实现了三竖排垂直对齐的布局了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！