Столбцы с CSS без использования нескольких div?

Question

Я хочу получить 4 столбца с плавающим текстом во всех них. Я не хочу делать 4 отдельных div с, потому что когда первый столбец заполнен текстом, текст должен продолжаться в следующем столбце.

Я также хочу установить ширину каждого столбца и отступ между ними. Кроме того, высота должна быть гибкой, в зависимости от объема текста.

У вас есть идеи?

Answer 1

Это очень трудно достичь, и не так, как HTML разработан. Рекомендуемый подход заключается в том, чтобы визуализировать весь текст в одном HTML-элементе (div или p и т. Д.) И в браузере, динамически изменять содержимое и разметку с учетом заранее определенной «предпочтительной высоты» и количества столбцов. Вы можете использовать методы height () jQuery, чтобы помочь вам в этом.

Вот сценарий с некоторыми основами .

Статья , объясняющая будущую поддержку , доступную в CSS3.

Answer 2

Эта статья (11 классических техник CSS, Mad Simple With CSS3) показывает, как это сделать, используя свойства, специфичные для Mozilla и WebKit. Подобные столбцы являются номером 9 в списке.

Для IE вам нужно дождаться поддержки CSS3 или использовать скрипт, такой как Columnize jQuery-плагин , упомянутый в статье.