CSS 两个文本列动态并排

Question

我想创建一篇从左栏开始的文章，当它到达底部时转到右栏继续，像这样：

所以我希望文本在到达底部时继续显示在第二列，有什么办法可以做到这一点吗？
如果它是纯粹的CSS我会很高兴，我找不到答案，因为搜索引擎不会搜索正确的东西。

Answer 1

使用 columns 属性.
请注意，浏览器兼容性有限（来自 IE11，包括）。
http://caniuse.com/#feat=multicolumn

.columned-content {
   -webkit-columns: 300px 2;
   -moz-columns: 300px 2;
   columns: 300px 2;
}

语法：
columns: <column-width> || <column-count>;

更多信息 - https://css-tricks.com/almanac/properties/c/columns/

Answer 2

您可以使用 column-count 以及许多其他选项。看这里css column count

Answer 3

试试这个：-

#col {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}

<div id="col">Lorem ipsum dolor sit amet, consectetur adipisicing 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</div>
CSS

CSS 两个文本列动态并排

CSS Two text column side by side dynamically

html

css

css-multicolumn-layout