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

Question

这可能看起来比你在点击这个问题时想到的要复杂得多.

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

任何建议或想法都会有很大帮助.谢谢!

Answer 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/