11

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

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 中有多少 <p>,然后根据它移动它们的后半部分以向右浮动?也许?建议将不胜感激:D

4

7 回答 7

12

好消息是,有一个CSS only 解决方案坏消息是,在现有的浏览器中没有对它的任何主要支持。如果它被实施,它看起来像这样:

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

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

于 2008-10-11T23:31:00.397 回答
5

我可能会在您的后端处理它,无论发生什么。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 解决方案会严重退化。

于 2008-10-11T23:24:12.703 回答
3

这是一个 JQuery 插件,它自动生成列,甚至可以根据屏幕大小改变列数。

我自己没有用过,但请检查一下。

于 2008-10-11T23:31:07.073 回答
1

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

于 2008-10-11T23:58:29.657 回答
0

This is difficult to achieve in HTML/CSS/JS for a reason (although I'm sure it's possible).

Newspapers use multiple columns to reduce the line width make text more readable. This is fine on paper because when you finish one column you flip your eye up to the beginning of the next.

On the web we use scrolling to allow text to continue past the bounds of the screen therefore don't need columns.

于 2008-10-12T08:14:26.893 回答
0

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

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

于 2008-10-11T23:21:07.063 回答
0

这在仅 Mozilla 的 CSS 扩展中受支持:-moz-column-count. 请参阅:https ://developer.mozilla.org/en/CSS3_Columns

于 2010-09-17T14:34:16.230 回答