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

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div>
<table style="width:100%">
  <tr>
    <td>John</td>
    <td>John</td> 
    <td>John</td>
  </tr>
  <tr>
    <td>John</td>
    <td>John</td> 
    <td>John</td>
  </tr>
  <tr>
    <td>John</td>
    <td>John</td> 
    <td>John</td>
  </tr>
  <tr>
    <td>John</td>
    <td>John</td> 
    <!--td>Your name here</td-->
  </tr>
</table>
</div>

</body>
</html>

希望这适合你：）

Answer 2

<强> 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;
}

CSS专栏

2 个答案: