html - CSS 专栏

Question

我需要使用 CSS 创建列。我有很多数据(名称)，我需要将其分为 3 列(就像在 Word 中一样)。我不是在考虑表格，我需要列的内容是动态的。像这样

John Smith |  John Smith |  John Smith
John Smith |  John Smith |  John Smith
John Smith |  John Smith |  John Smith
John Smith |  John Smith | 

如果我添加新的“John”，所有列都会像这样重新排列

Joe Smith  |  John Smith |  John Smith
John Smith |  John Smith |  John Smith
John Smith |  John Smith |  John Smith
John Smith |  John Smith |  John Smith

这可以通过 CSS 实现吗？谢谢。

Answer 1

HTML:

<div class="names">
    <div>John Smith</div>
    <div>John Smith</div>
    <div>John Smith</div>
    <div>John Smith</div>
    <div>John Smith</div>
    <div>John Smith</div>
    <div>John Smith</div>
    <div>John Smith</div>
</div>

CSS:

.names {

     -webkit-column-count: 3; 
    -moz-column-count: 3; 
    column-count: 3;
    -webkit-column-gap: 40px; 
    -moz-column-gap: 40px;
    column-gap: 40px;
    -webkit-column-rule-style: solid; 
    -moz-column-rule-style: solid; 
    column-rule-style: solid;
}