html中的报纸样式多列文本答案

【问题标题】：Newspaper style multiple-column text in htmlhtml中的报纸样式多列文本
【发布时间】：2012-01-09 14:36:37
【问题描述】：

我想显示一个包含多列的文本。和报纸上的显示方式一样：

我知道如何对 div 表执行此操作，但在这种情况下，我必须指定在列之间剪切文本的位置。

我看到了一个合适的解决方案： <div style="column-count:2"> text </bla>

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

【问题讨论】：

标签： html css layout stylesheet

【解决方案1】：

column-count 是 CSS3，因此请注意它在某些旧版浏览器中无法使用。

要回答您的问题，您可能需要更具体地使用您的 css：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

如果 column-count 在所有主流浏览器上都可以工作，那就太好了，但事实并非如此。我建议您尝试使用编程语言（如 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>

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

【讨论】：