1

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

我正在寻找一个非常简单的可以容纳文本的 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意味着实际的字符数与内容的高度完全无关。不，我不能使用固定宽度的字体。我有一种感觉，这将是最后的手段，但我讨厌轻易放弃。

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

4

2 回答 2

5

您所描述的内容已经通过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/

于 2012-09-19T22:10:29.660 回答
0

对于那些正在寻找不同解决方案的人（以及由于 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);.

于 2012-09-21T22:41:16.887 回答