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>

Answer 3

對於NO CSS3解決方案，請使用jQuery插件： http ： //welcome.totheinter.net/columnizer-jquery-plugin/

示例： http ： //welcome.totheinter.net/autocolumn/sample1.html

它適用於IE6 +，FF2 +，safari，chrome，opera :)