如何创建带有间隙的两列布局

Question

我的div中有两列，我想用一条垂直线表示的间隙将它们分开：

我怎样才能做到这一点？

Answer 1

Css列听起来像你正在寻找的。您可以使用column-rule属性作为垂直线。

columns: 2 400px;
column-rule: 1px solid black;

https://css-tricks.com/almanac/properties/c/column-rule/

请注意，元素的顺序就像文本流一样，所以：

1 | 4
2 | 5
3 | 6

如果这对您没有影响，您可以在第一列添加右边框，并在右侧添加边距+填充以均匀分隔。 （与display: block;一起使用浮点数，或display: inline-block;用于显示彼此相邻的列。）