使用 CSS 或 JavaScript 自动创建两列答案

【问题标题】：Automatic two columns with CSS or JavaScript使用 CSS 或 JavaScript 自动创建两列
【发布时间】：2010-09-16 17:25:03
【问题描述】：

我目前正在开发一个网站，我的客户希望各种文章的文本溢出到两列中。有点像在报纸上？所以它看起来像：

Today in Wales, someone actually      Nobody was harmed in
did something interesting.            the incident, although one 
Authorities are baffled by this       elderly victim is receiving
development and have arrested the     counselling.
perpetrator.

[我想写点东西的尝试真的很糟糕]

有没有办法只用 CSS 来做到这一点？我宁愿不必使用多个 div。我也对使用 JavaScript 持开放态度，但我在这方面 - 真的 - 很糟糕，所以我们将不胜感激。我在想也许 JavaScript 可以计算内容 div 中有多少

，然后根据它移动它们的后半部分以向右浮动？可能是？建议将不胜感激：D

【问题讨论】：

标签： javascript css two-columns

【解决方案1】：

好消息是，有一个CSS only solution。坏消息是，existing browsers 没有任何主要的支持。如果实现了，它会是这样的：

div.multi {
  column-count: 3
  column-gap: 10px;
  column-rule: 1px solid black;      
}

我认为目前你最好的选择可能是一氧化碳提到的服务器端

【讨论】：

至于 Spring 2012，CSS 解决方案在 Firefox/Chrome 中运行良好。
@PavelVlasov 那时有效吗？它现在不能在 Chrome 上运行，W3Schools 说它只能在原生的 Opera 和带有 webkit/moz 前缀的 Chrome/Firefox 上运行。仍然不在 IE 上（请参阅w3schools.com/css3/css3_multiple_columns.asp）。不敢相信 4 年过去了，这个非常方便的 CSS 并没有得到适当的支持。
-moz-column-count:2; -webkit 列数：2；列数：2；

【解决方案2】：

我可能会在您的后端处理它，无论发生什么。 PHP 中的示例可能如下所示：

$content = "Today in Wales, someone actually did something...";
// Find the literal halfway point, should be close to the textual halfway point
$pos = int(strlen($content) / 2);
// Find the end of the nearest word
while ($content[$pos] != " ") { $pos++; }
// Split into columns based on the word ending.
$column1 = substr($content, 0, $pos);
$column2 = substr($content, $pos+1);

应该可以在 JavaScript 中使用 InnerHTML 做类似的事情，但我个人会避免这种情况，因为越来越多的人正在使用像 NoScript 这样的插件，它会禁用 JavaScript，直到它被明确允许用于 x 站点，最重要的是否则，div 和 CSS 旨在很好地降级。在这种情况下，JavaScript 解决方案会严重退化。

【讨论】：

【解决方案3】：

Here's a JQuery plugin 自动分列，甚至可以根据屏幕大小改变列数。

我自己没用过，但是看看吧。

【讨论】：

【解决方案4】：

如果您使用的是 Mootools，可以查看MooColumns。

【讨论】：

【解决方案5】：

首先，我不认为只有 css 可以做到这一点，但我很想被证明是错误的。

其次，仅计算段落对您根本没有帮助，您至少需要所有高度并基于此计算文本高度的中间值，但您必须考虑窗口大小调整等。我没有不认为有一个相当简单的现成解决方案。不幸的是，我对找到解决这个问题的完美解决方案感到悲观，但这是一个有趣的解决方案。

【讨论】：

【解决方案6】：

这在 HTML/CSS/JS 中很难实现是有原因的（尽管我确信这是可能的）。

报纸使用多列来减少行宽，使文本更具可读性。这在纸上很好，因为当您完成一列时，您的视线会转向下一列的开头。

在网络上，我们使用滚动来允许文本继续超出屏幕边界，因此不需要列。

【讨论】：

【解决方案7】：

只有 Mozilla 的 CSS 扩展支持此功能：-moz-column-count。见：https://developer.mozilla.org/en/CSS3_Columns

【讨论】：