Question

问题：

文本中有一大部分：

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

我需要把它分成两列。在页面上，它应分为两个相同（高度）列。

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

如果可能：更改文本容器的大小，则列应保持相同的高度。是否可能设置数字“n” - 在多少列上划分大部分文本。那就是将文本分成任意数量的列。

有没有PHP，XSLT，CSS，纯javascript（没有jQuery）？什么工具更适合使用？正如它所做的那样，该决定与浏览器兼容。

Answer 1

如果你不介意它不能在IE的某些版本中工作，你可以使用新的CSS3多列，这是一件小事实施，请参阅：

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

Answer 2

这可以通过一些Javascript来实现。我称之为以下算法Columns_Fit：

首先找到高度最小的列和高度最大的列。
从步骤1中找到的最大列的第一段中删除一个单词，并将该单词添加到您在步骤＃1中找到的最小列。
比较两列的高度。
如果他们仍然不同，请重复步骤＃2。

这就是算法的原理。你应该通过“走向中间”的方法为每一列重复一遍，例如：

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

以上列是从最小的一个（col1）到最高的一个（col4）的顺序。从col1和col4开始，然后执行Columns_Fit算法。稍后，在接下来的两列上执行Columns_Fit算法：col2和col3。这就是为什么我把这种方法称为“走向中间”。

请注意，并非所有列的高度都完全相等，高度应该存在偏差。偏差等于线高或大于线高。（偏差＆gt; =线高）

有趣的参考：Cross-Column Pull-Outs作者：Daniel M. Frommelt @ alistapart.com

Answer 3

我找到了这样的参考。

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

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

减： js-file足够重。

还有一个决定（也适用于onResize）： http://randysimons.nl/125,english/129,multi-column-text/#paragraaf_1

将大文本分成列

3 个答案: