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

这可能比你点击这个问题时第一次想到的要复杂一些

我希望创建一个非常简单的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.     |
|-------------|  |-------------|

内容放在这里。。。有很长一段时间。。。益母草更好

|-------------|  |-------------|
|内容| |而|
|到这里来| | lorum ipsum|
| ... 因为| |将是|
|好多了|
|-------------|  |-------------|

因此，这排除了浮动左/右功能，因为它包含两个不同的列，而实际上，它需要是一个列。就这样分手

我曾想过使用PHP的

strlen

函数来计算字符数，但众所周知，在不同的字体中，

I

比

w

小，这意味着实际字符数与内容高度无关。不，我不能使用固定宽度的字体。我有一种感觉，这将是最后的手段，但我讨厌轻易放弃

---

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

您所描述的内容已通过

列计数属性在CSS3中实现：

CSS：

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

演示：

如果您也想支持IE，请使用JS polyfill:
您所描述的内容已经通过
列计数属性在CSS3中实现：

CSS：

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

演示：

如果您还想支持IE，请使用JS polyfill:
对于那些正在寻找不同解决方案的人（以及我使用的不幸解决方案，因为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）
对于那些正在寻找不同解决方案的人（以及我使用的不幸解决方案，因为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）
同上。这是天才。我不知道为什么这不是一开始就发明的。同上。这是天才。我不知道为什么这不是一开始就发明的。