2-колоночное автоматическое размещение CSS?

Question

Учитывая

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing...
</div>

возможно ли с помощью CSS автоматически генерировать макет из 2 или 3 столбцов, скажем, путем указания высоты контейнера? Если нет, каковы лучшие практики в таком случае?

Спасибо за вашу помощь.

Answer 1

Вы всегда можете использовать подход jQuery, посмотрите эту статью: http://www.mainelydesign.com/blog/view/auto-columns-columnizer-my-new-favorite-jquery-plugin

Answer 2

Учитывая комментарии к моему предыдущему ответу, кажется, что я, возможно, неправильно понял, что вы искали.

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

• CSS 3 Multi-столбцы (плохо поддерживается)
• JavaScript (интересные проблемы с перекомпоновкой)

Лично я бы этого избежал. В общем, контент, который перетекает из одного столбца в другой, довольно недоброжелателен к экрану.

Answer 3

Скорее всего, вы не сможете превратить вышеперечисленное в макет из 2 или 3 столбцов, однако, если у вас есть контейнер и 3 делителя, создание макета из 3 столбцов будет таким простым:

<div class="container">

  <div class="col1">Column1</div>
  <div class="col2">Column2</div>
  <div class="col3">Column3</div>

</div>

И CSS:

.container{overflow:hidden; padding:20px; border:1px solid #ccc;}
.col1, .col2, .col3{width:200px;float:left;clear:none;margin:0 10px 0 10px;}

Это создаст ОЧЕНЬ базовую 3-х колоночную разметку, где каждый столбец имеет 10px поля с каждой стороны.Контейнер div имеет отступы 20px и тонкую границу.

Надеюсь, это указывает вам правильное направление.

Answer 4

Для такого типа вещей я бы посмотрел на систему координат, такую ​​как 960 или YUI

Оба включают способы разделения подразделов на столбцы.

Answer 5

На веб-сайте Floatutorial есть хорошие примеры передового опыта.