前端 - 左右两个模块，平分整个模块的剩余空间，中间一条竖线，怎么做？

Question

Answer 1

要实现左右两个模块平分整个父容器的剩余空间，并在中间添加一条竖线，可以使用Flexbox布局和CSS伪元素来实现。

以下是一个示例，展示了如何使用Flexbox布局和CSS伪元素来实现该效果：

<div class="container">  <div class="left"></div>  <div class="divider"></div>  <div class="right"></div></div>

.container {  display: flex;}.left,.right {  flex: 1;}.divider {  width: 1px;  background-color: #000;}

在上面的代码中，我们首先创建一个父容器，使用Flexbox布局使其子元素水平排列。.container类设置为display: flex，这样子元素将自动水平排列。

然后，我们使用.left和.right类来定义左右两个模块。通过将flex属性设置为1，这两个模块将平分父容器的剩余空间。

接下来，我们创建一个.divider类来定义中间的竖线。通过将其宽度设置为1px，背景色设置为你想要的颜色，可以创建一条竖线。

通过使用Flexbox布局和CSS伪元素，我们可以实现左右两个模块平分整个父容器的剩余空间，并在中间添加一条竖线。你可以根据需要调整样式和颜色来满足你的设计要求。