Какие существуют варианты, чтобы элементы текста / списка отображались в столбцах? - PullRequest
0 голосов
/ 22 июля 2009

У меня есть куча HTML-разметки, поступающей из внешнего источника, и это в основном h3 элементы и ul элементы.

Я хочу иметь поток контента в 3 столбцах. Я знаю, что в CSS3 есть что-то новое, но какие у меня есть варианты, чтобы в данный момент этот контент плавно перетек в 3 колонки? Я не так обеспокоен IE6 (до тех пор, пока он грациозно ухудшается). Я застрял с помощью jQuery, чтобы разобрать разметку и разделить ее на 3 деления, которые всплывают?

Спасибо

Обновление

В соответствии с запросом, вот часть HTML-кода, с которым я работаю

<h3>Tourism Industry</h3>

            <ul>

                <li><a href="">Something</a></li>
                <li><a href="">Something</a></li>
                <li><a href="">Something</a></li>

                <li><a href="">Something</a></li>
            </ul>

            <h3>Small Business</h3>
            <ul>
                <li><a href="">Something</a></li>
                <li><a href="">Something</a></li>
                <li><a href="">Something</a></li>

                <li><a href="">Something</a></li>
                <li><a href="">Something</a></li>

            </ul> 

И многое другое в том же формате.

Ответы [ 3 ]

1 голос
/ 22 июля 2009

Лично я бы просто использовал CSS3. Если повезет, он может быть реализован в IE9. Если вам нужна поддержка IE7 / 8 / Opera, думаю, я бы добавил решение JavaScript для случаев, когда CSS3 недоступен (как объяснили другие пользователи).

0 голосов
/ 22 июля 2009

Учитывая ваш пример HTML, я сомневаюсь, что есть какой-либо способ создать колонный макет, используя только CSS. Проблема в том, что ваши группы тегов H3 и UL не связаны каким-либо контейнером. Это делает довольно сложным размещение этих групп и упаковку их в коллимированный макет.

Я думаю, что описанный процесс inkedmn довольно приличный, учитывая то, с чем вам приходится работать.

0 голосов
/ 22 июля 2009

Хотя я не уверен, что полностью понимаю ваш вопрос (но я думаю, что понимаю), я бы, вероятно, сделал что-то вроде этого:

  1. Создайте div где-нибудь на странице и установите для свойства display значение none.
  2. Получите HTML-код и запишите его в этот раздел.
  3. Захватите каждый отдельный набор элементов <h3> и <ul> (с использованием jQuery), выполните любые приложения класса или все, что нужно сделать перед отображением, и запишите их в целевой контейнер. Если вы не знаете, сколько наборов <h3> и <ul> вы собираетесь получить, таблица лучше всего подойдет в качестве цели (о боже, я сказал, что таблица!), Так как вы сможете контролировать где происходят разрывы строк и тому подобное (и это на самом деле будет иметь большое значение для сохранения совместимости со старыми браузерами, такими как IE6).
  4. Удалить скрытый div из DOM.

Не уверен, что это тот ответ, который вы искали, но именно так я подхожу к проблеме. Удачи!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...