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>
...

但说实话,我认为只需在div的宽度两倍的框中浮动6个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>