html中的报纸风格多列文本

Question

我想显示包含多个列的文本。与在报纸上显示的方式相同：

我知道如何使用div表格，但在这种情况下，我必须指定列之间文本的切割位置。

我通过以下方式看到了合适的解决方案： <div style="column-count:2"> text </bla>

它适用于Opera，但不适用于最新的firefox和chrome ......

Answer 1

column-count是CSS3，因此请注意它不适用于某些旧版浏览器。

要回答您的问题，您可能需要更具体地了解您的问题：

div{
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}

Answer 2

您还可以使用float：left和float：right来为旧浏览器支持创建列。

虽然文本卡在每一列中，但不会扩展到下一列。

Answer 3

如果列计数适用于所有主流浏览器，那将会很棒，但事实并非如此。我建议你尝试使用编程语言（如PHP）将文本拆分为部分，并将它们插入到每个div中。简单来说就像这样

<?php
$textLenght = strlen($text);
$part1 = substr($text, 0, $textLenght/2);
$part2 = substr($text, $textLenght/2);
?>

<div class="col1"><?php echo $part1 ?></div>
<div class="col2"><?php echo $part2 ?></div>

当然你应该使用更多的advenced算法来分割文本。