Макет столбца в HTML (5) / CSS

Question

Есть ли способ в HTML5 / CSS, чтобы столбцы были расположены так, как показано ниже, и при этом текстовый поток был корректным?

######  ######
# C1 #  # C2 #
#    #  #    #
######  ######

######  ######
# C3 #  # C4 #
#    #  #    #
######  ######

######  ######
# C5 #  # C6 #
#    #  #    #
######  ######

Просто чтобы уточнить - я хочу иметь возможность писать весь текст в пределах одного элемента, и CSS должен создавать столбцы.

Answer 1

Хотя здесь используется один элемент, но разрывы должны быть определены вручную.

Используйте свойство column-span и используйте элемент, такой как <br />, для определения вертикальных точек останова. Контент будет выглядеть и отображаться примерно как:

<p>
  CSS3 multi
  <br/>
  columns are
  <br />
  just awesome.
</p>

CSS3    | multi
-----------------
columns | are
-----------------
just    | awesome

CSS выглядит так:

p {
    column-count: 2;
    column-rule: 1em solid black;
}

br {
    column-span: all;
}

Добавить соответствующие браузерные префиксы (-webkit, -moz) соответственно. column-span может не поддерживаться ни одним браузером на сегодняшний день. Смотрите эту статью для деталей. Вот моя слабая попытка , которая не работала на Chrome.

Answer 2

Если вы используете HTML5, то я полагаю, что вы тоже хорошо используете CSS3:

<style>
  .columns{
    -webkit-column-count: 2;
    -webkit-column-rule: 0px;
    -moz-column-count: 2;
    -moz-column-rule: 0px;
  }
</style>

<div class="containter">
  <div class="columns">
    <div>C1</div>
    <div>C2</div>
  </div>
  <div class="columns">
    <div>C3</div>
    <div>C4</div>
  </div>
  <div class="columns">
    <div>C5</div>
    <div>C6</div>
  </div>
</div>
...

Но, честно говоря, я думаю, что вам лучше, если вы просто поместите 6 делений в поле, в два раза больше деления:

<style>
  .containter{
    width: 300px;
  }
  .containter div{
    width: 150px;
    float: left;
  }
</style>

<div class="containter">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Answer 3

Для решения НЕТ CSS3 используйте плагин jQuery: http://welcome.totheinter.net/columnizer-jquery-plugin/

Пример: http://welcome.totheinter.net/autocolumn/sample1.html

Это работает для IE6 +, FF2 +, Safari, Chrome, Opera:)