仅使用 CSS 和 HTML 的简单列布局答案

【问题标题】：Simple column layout using CSS and HTML only仅使用 CSS 和 HTML 的简单列布局
【发布时间】：2012-09-19 22:05:57
【问题描述】：

这似乎比您单击此问题时最初想象的要复杂一些。

我希望创建一个非常简单的可以容纳文本的 2 列布局。问题是，文本是通过内容管理系统导入的，因此可能会更改。这个想法是有一个标签，当它用完它的所有空间时，它可以在另一列上继续内容。

<p>Content goes here ... for quite a while ... lorum ipsum would be better.</p>

|-------------|  |-------------|
| Content     |  | while ...   |
| goes here   |  | lorum ipsum |
| ... for     |  | would be    |
| quite a     |  | better.     |
|-------------|  |-------------|

所以这排除了浮动左/右功能，因为它包含两个不同的列，而本质上它需要是一个。分手吧。

我曾想过使用 PHP 的 strlen 函数来计算字符数，但众所周知，在不同的字体中，i 小于 w，这意味着实际的字符数与内容的高度。不，我不能使用固定宽度的字体。我有一种感觉，这将是最后的手段，但我讨厌轻易放弃。

任何建议或想法都会有很大帮助。谢谢！

【问题讨论】：

标签： html css multiple-columns

【解决方案1】：

您所描述的内容已经通过 column-count 属性在 CSS3 中实现：

CSS：

p {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    -o-column-count: 2;
    column-count: 2;
}

演示：http://jsfiddle.net/WDgsv/

如果您也想支持 IE，请使用 JS polyfill：http://www.csscripting.com/css-multi-column/

【讨论】：

同上。这是天才。我不知道为什么这不是一开始就发明的。

【解决方案2】：

对于那些正在寻找不同解决方案的人（以及由于 IE 是绝对痛苦而使用的不幸解决方案），我创建了这段简洁的代码：

<? $array_content = explode("</p>", $page_content);
$i = 0;
foreach($array_content as $paragraph) {
  echo $paragraph;
  if($i == (round(count($array_content)/2, 0, PHP_ROUND_HALF_DOWN))-1) {
    echo "</div><div class=\"column\">";
  }
  $i++;
}?>

也适用于句子，只需将针改为句号：explode(".", $page_content);。

【讨论】：