Question

我已使用CSS列属性将文本划分为4列，结果类似于this

现在我想做的是以一种我可以获得this

之类的方式平均分发文本

代码：

＆＃13;

#container {
background: rgba(255, 237, 0, 1.00);
width: 100%;
-webkit-column-count: 4;
-webkit-column-gap: 15px;
-webkit-column-rule: 2px solid lightblue;
-moz-column-count: 4;
-moz-column-gap: 15px;
-moz-column-rule: 2px solid lightblue;
column-count: 4;
column-gap: 15px;
column-rule: 2px solid lightblue;
}

＆＃13;

<section id="container">
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

</section>

＆＃13;

Answer 1

您可能遇到了浏览器支持问题。查看http://caniuse.com/#search=columns以了解支持的列目前的情况。

请参阅此Jsfiddle以获取具有浏览器前缀的示例，这些前缀似乎可以满足您的要求 https://jsfiddle.net/82dnb1ab/

#container {
  background: rgba(255, 237, 0, 1.00);
  width: 100%;
  -webkit-column-count: 4;
  -webkit-column-gap: 15px;
  -webkit-column-rule: 2px solid lightblue;
  -moz-column-count: 4;
  -moz-column-gap: 15px;
  -moz-column-rule: 2px solid lightblue;
  column-count: 4;
  column-gap: 15px;
  column-rule: 2px solid lightblue;
}

在CSS列属性中均匀分发文本

1 个答案: