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

这看起来可能比您在单击此问题时首先想到的要复杂一些。仅使用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.  | 
|-------------| |-------------|

因此，这排除了浮动左/右功能，因为它包含两个不同的列时，本质上，它需要是一个。只是分裂。

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

任何建议或意见将是一个很大的帮助。谢谢！

来源

2012-09-19 Oliver Tappin

什么你所描述通过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-19 22:10:29 Blender

在那里你有我的最爱，先生。 – Nelson

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

对于那些寻找不同的解决方案，（和不幸的解决方案，我由于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-21 22:41:16

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

回答

相关问题