HTML（5）/ CSS中的列布局 [英] Column layout in HTML(5)/CSS

问题描述

有没有一种方法在HTML5 / CSS有如下所示的列，仍然有正确的文本流？

Is there a way in HTML5/CSS to have the columns layed out as shown below, and still have the text flow correctly?

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

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

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

只是为了澄清 - 我想能够写所有的文字在一个单一的元素，并有CSS创建列。

Just to clarify - I want to be able to write all the text within a single element and have the CSS create the columns.

推荐答案

虽然这只使用一个元素，但是必须手动定义断点。

Although this uses one single element, but the breaks must be manually defined.

使用 column-span 属性并使用一个诸如< br /> 之类的元素来定义垂直断点。内容将外观和呈现为：

Use the column-span property and use an element such as <br /> to define the vertical breakpoints. The content will look and render approximately as:

<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上无法使用的微软尝试。

Add browser specific prefixes (-webkit, -moz) accordingly. column-span may not be supported by any browsers as of today. See this article for details. Here's my feeble attempt that didn't work on Chrome.

这篇关于HTML（5）/ CSS中的列布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！