Разделить большой текст на столбцы - PullRequest
4 голосов
/ 29 марта 2010

Проблема:

Большой кусок текста:

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

Мне нужно разделить его на две колонки. На странице его следует разделить на два примерно одинаковых (по высоте) столбца.

альтернативный текст http://img408.imageshack.us/img408/4672/77983007.gif

Если это возможно: при изменении размеров контейнера текста, столбец должен оставаться одинаковой высоты. Возможно ли задать число "n" - на сколько столбцов разделить большой кусок текста. То есть разделить текст на любое количество столбцов.

Есть ли PHP, XSLT, CSS, чистый javascript (без jQuery)? Какой инструмент лучше использовать? Как это сделать, чтобы решение было кросс-браузерно-совместимым.

Ответы [ 3 ]

4 голосов
/ 29 марта 2010

Если вы не возражаете, что он не работает в определенных версиях IE, вы можете использовать новые многостолбцовые CSS3, которые легко реализовать, см .:

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

0 голосов
/ 29 марта 2010

Я нашел такую ​​ссылку.

Решение меня устраивает. http://www.csscripting.com/css-multi-column/.

Взял отсюда: http://www.alistapart.com/articles/css3multicolumn/.

Минус: js-файл достаточно тяжелый.

Еще одно решение (работает и с onResize): http://randysimons.nl/125,english/129,multi-column-text/#paragraaf_1

0 голосов
/ 29 марта 2010

Это возможно с некоторыми Javascript. Я называю следующий алгоритм Columns_Fit:

  1. Сначала найдите столбец с наименьшей высотой и столбец с наибольшей высотой.
  2. Удалите слово из первого абзаца самого большого столбца, который вы нашли на шаге 1, и добавьте это слово к самому маленькому столбцу, который вы нашли на шаге 1.
  3. Сравните высоту двух столбцов.
  4. Если они все еще разные, повторите шаг # 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. Вот почему я называю этот подход «движением к середине».

Обратите внимание, что не все столбцы могут быть точно равными по высоте, должно быть отклонение по высоте. Отклонение равно высоте линии или больше, чем высота линии. (отклонение> = высота линии)

Интересная ссылка: Выступы в виде поперечной колонны Даниэль М. Фроммельт @ alistapart.com

...