CSS 两个文本列动态并排答案

【问题标题】：CSS Two text column side by side dynamicallyCSS 两个文本列动态并排
【发布时间】：2017-08-26 04:11:40
【问题描述】：

我想创建一个从左栏开始的文章，当它到达底部时，它会转到右栏继续，如下所示：

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

【问题讨论】：

你应该看看这篇文章：stackoverflow.com/questions/9305198/…
这是另一个：stackoverflow.com/questions/3009670/…
使用谷歌就足够了。
除非您必须这样做，否则您可能需要重新考虑您的设计。列对于打印页面来说是一个好主意，因为介质的大小是固定的。网络的媒介是可变的，因此，在尝试将其翻译到不同的设备时可能会遇到问题。此外，它的支持很差。

【解决方案1】：

试试这个：-

#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

【讨论】：

【解决方案2】：

使用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>;

【讨论】：

【解决方案3】：

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

【讨论】：