Существует ли путь в HTML5/CSS, чтобы разметить столбцы как показано ниже и все еще иметь текстовый поток правильно?
###### ######
# C1 # # C2 #
# # # #
###### ######
###### ######
# C3 # # C4 #
# # # #
###### ######
###### ######
# C5 # # C6 #
# # # #
###### ######
Просто для уточнения - я хочу смочь записать, что весь текст в единственном элементе и иметь CSS создает столбцы.
Хотя здесь используется один единственный элемент, но разрывы должны быть определены вручную.
Используйте свойство column-span и используйте такой элемент, как
, чтобы определить точки останова по вертикали. Содержимое будет выглядеть и отображаться примерно так:
<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.
Если вы используете 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 div в рамке, ширина которой в два раза больше ширины div'ов:
<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>