把大文本分成几列

Problem:

问题:

There is a big piece of the text:

文中有一大段:

<div class="cont">
    <p>
        Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
        totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, 
        explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur 
        magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia 
        dolor sit, amet,
    </p> 
    <p>
        consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam 
        aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit 
        laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea 
        voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas 
        nulla pariatur? At vero eos et 
    </p>
    <p>
        accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque 
        corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt 
        in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis 
        est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, 
        quo minus id, quod maxime placeat, 
    </p>
    <p>
        facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam 
        et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et 
        molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
         maiores alias consequatur aut perferendis doloribus asperiores repellat.
    </p>
    <p>
        Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
        totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta 
        sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia 
        consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui 
        dolorem ipsum, quia dolor sit, amet,
    </p> 
    <p>
        consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore 
        magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis 
        suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, 
        qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, 
        quo voluptas nulla pariatur? At vero eos et 
    </p>
    <p>
        accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque 
        corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique 
        sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem 
        rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi 
        optio, cumque nihil impedit, quo minus id, quod maxime placeat, 
    </p>
    <p>
        facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam 
        et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et 
        molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis 
        voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
    </p>
</div>

I need to divide it into two columns. On the page, it should be divided on two about identical (on height) columns.

我需要把它分成两列。在页面上，它应该被分成两列(在高度上)相同。

alt text http://img408.imageshack.us/img408/4672/77983007.gif

alt文本http://img408.imageshack.us/img408/4672/77983007.gif

If it is possible: at change of the sizes of the container of the text, a column should remain identical height. Whether probably to set number "n" - on how many columns to divide the big piece of the text. That is to divide the text into any number of columns.

如果可能的话:在改变文本容器的大小时，列的高度应该保持相同。是否可能设置数字“n”—在多少列上划分文本的大段。也就是把文本分成任意数量的列。

Is there any PHP, XSLT, CSS, pure javascript (without jQuery)? What tool is better for using? As it to make, that the decision was сross browser compatible.

有没有PHP、XSLT、CSS、纯javascript(没有jQuery)?使用什么工具比较好?因为它,这个决定是сross浏览器兼容。

3 个解决方案

#1

If you don't mind it not working in certain versions of IE, you can use the new CSS3 multi-columns, which are a piece of cake to implement, see:

如果您不介意它在IE的某些版本中不起作用，您可以使用新的CSS3多列，这是一个容易实现的部分，请参见:

http://www.css3.info/preview/multi-column-layout/

#2

This is possible with some Javascript. I call the following algorithm Columns_Fit:

这可以通过一些Javascript实现。我将以下算法命名为Columns_Fit:

First find the column with the smallest height and the column with the greatest height.
首先找到高最小的柱和高最大的柱。
Remove a word from the first paragraph of the greatest column that you found in step #1, and add that word to the smallest column that you found on step #1.
从步骤#1中找到的最伟大的列的第一段中删除一个单词，并将该单词添加到步骤#1中找到的最小的列中。
Compare the height of the two columns.
比较两列的高度。
If their still different, repeat step #2.
如果他们仍然不同，重复第2步。

That's the principle of the algorithm. You should repeat that for every column by "going to the middle" approach, for example:

这就是算法的原理。你应该在每一栏中重复“走中间”的方法，例如:

<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
<div id="col4"></div>

The above columns are order from the smallest one (col1) to the highest one (col4). Start with col1 and col4, and perform on them Columns_Fit algorithm. Later, perform the Columns_Fit algorithm on the next two column: col2 and col3. This is why I call this approach "going to the middle".

上面的列是从最小的(col1)到最高的(col4)排序的。从col1和col4开始，并对它们执行Columns_Fit算法。稍后，在接下来的两列:col2和col3上执行Columns_Fit算法。这就是为什么我称这种方法为“走中间路线”。

Note that not all columns can be exactly equal in height, there should be a deviation in the height. The deviation is equal to the line height or greater than the line height. (deviation >= line height)

注意，并不是所有的列都可以完全相等，高度应该有偏差。偏差等于线高或大于线高。(偏差> =行高)

Interesting reference: Cross-Column Pull-Outs by Daniel M. Frommelt @ alistapart.com

有趣的参考:丹尼尔·m·弗洛姆斯特(Daniel M. Frommelt)在alistapart.com网站上的专栏文章

#3

I have found such reference.

我找到了这样的参考资料。

The decision suits me. http://www.csscripting.com/css-multi-column/.

适合我的决定。http://www.csscripting.com/css-multi-column/。

Took from here: http://www.alistapart.com/articles/css3multicolumn/.

从这里:http://www.alistapart.com/articles/css3multicolumn/。

Minus: js-file heavy enough.

-:js文件不够重。

One more decision (works with onResize too): http://randysimons.nl/125,english/129,multi-column-text/#paragraaf_1

还有一个决定(也适用于onResize): http://randysimons.nl/125,english/129，多列文本/# raaf_1

#1