Question

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

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中有多少＆lt; p＆gt;，然后根据它移动它们的后半部分？也许？建议将不胜感激：D

Answer 1

好消息是，有CSS only solution。坏消息是，existing browsers中没有任何重大支持。如果它被实现，它将如下所示：

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

我认为现在你最好的选择可能就是monoxide提到的服务器端

Answer 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);

应该可以使用InnerHTML在JavaScript中执行类似的操作，但我个人会避免这种情况，因为越来越多的人使用像NoScript这样的插件来禁用JavaScript，直到它明确允许x站点，并且高于任何东西否则，div和CSS的设计可以很好地降级。在这种情况下，JavaScript解决方案会严重降级。

Answer 3

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

我自己没有用过，但请查看。

Answer 4

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

Answer 5

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

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

Answer 6

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

报纸使用多列来减少行宽，使文本更具可读性。这在纸上很好，因为当你完成一个专栏时，你会将目光转向下一个专栏的开头。

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

Answer 7

仅在Mozilla的CSS扩展程序中支持此功能：-moz-column-count。请参阅：https://developer.mozilla.org/en/CSS3_Columns

使用CSS或JavaScript自动两列

7 个答案: