HTML(5)/CSS 中的列布局答案

【问题标题】：Column layout in HTML(5)/CSSHTML(5)/CSS 中的列布局
【发布时间】：2013-02-22 06:20:19
【问题描述】：

在 HTML5/CSS 中有没有一种方法可以使列的布局如下所示，并且仍然可以正确地显示文本？

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

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

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

澄清一下 - 我希望能够在单个元素中编写所有文本并让 CSS 创建列。

【问题讨论】：

你的意思是“让文本正确流动”？有几种方法可以做到这一点，具体取决于您的“C”元素是块还是内联，它们是否都相同大小，是否应该调整彼此的大小等。提供更多细节......
您能发布您想要的标记外观吗？如果它们不是单独的元素，我不清楚 C1、C2 等是什么。

标签： css html

【解决方案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 目前可能不被任何浏览器支持。有关详细信息，请参阅此article。这是我的 attempt，在 Chrome 上不起作用。

【讨论】：

为了后代，这一尝试似乎在一年后在 Chrome 上起作用。
请注意 CSS3 列在 IE9 或更低版本中不起作用 quirksmode.org/css/columns

【解决方案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>

【讨论】：

感谢您的回答。澄清一下，我想在单个标签/元素中编写文本并让 HTML5/CSS 创建列，而不是明确地将文本放在每一列中。
我想浮动是你的解决方案 :)
在您的第二个解决方案中，我是否还必须在每个 div 中明确放置文本？溢出会发生什么？
我以为您只是遇到了 6 篇不同“文章”的情况。您希望能够添加 1 个连续长文本并仍然获得该布局吗？如果是这样，我的解决方案就不行了;)
假设你浮动：左，3个div因此在第一行，其他从第二行开始。如果第一行第 2 个 div 的内容较大，则第 3 个第 4 个 div 的内容会被它阻止。 :)

【解决方案3】：

对于没有 CSS3 的解决方案，请使用 jQuery 插件： http://welcome.totheinter.net/columnizer-jquery-plugin/

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

它适用于 IE6+、FF2+、safari、chrome、opera :)

【讨论】：