HTML(5)/CSS 中的列布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2880492/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Column layout in HTML(5)/CSS
提问by Charlie
Is there a way in HTML5/CSS to have the columns layed out as shown below, and still have the text flow correctly?
HTML5/CSS 中是否有一种方法可以使列按如下所示进行布局，并且仍然使文本流正确？
###### ######
# C1 # # C2 #
# # # #
###### ######
###### ######
# C3 # # C4 #
# # # #
###### ######
###### ######
# C5 # # C6 #
# # # #
###### ######
Just to clarify - I want to be able to write all the text within a single element and have the CSS create the columns.
只是为了澄清 - 我希望能够在单个元素中写入所有文本并让 CSS 创建列。
回答by Anurag
Although this uses one single element, but the breaks must be manually defined.
虽然这使用一个单一的元素，但必须手动定义中断。
Use the column-spanproperty and use an element such as <br />to define the vertical breakpoints. The content will look and render approximately as:
使用column-span属性并使用诸如<br />定义垂直断点的元素。内容的外观和呈现方式大致如下：
<p>
CSS3 multi
<br/>
columns are
<br />
just awesome.
</p>
CSS3 | multi
-----------------
columns | are
-----------------
just | awesome
CSS looks like:
CSS看起来像：
p {
column-count: 2;
column-rule: 1em solid black;
}
br {
column-span: all;
}
Add browser specific prefixes (-webkit, -moz) accordingly. column-spanmay not be supported by any browsers as of today. See this articlefor details. Here's my feeble attemptthat didn't work on Chrome.
相应地添加浏览器特定的前缀（-webkit、-moz）。column-span截至今天，任何浏览器可能都不支持。有关详细信息，请参阅此文章。这是我在 Chrome 上不起作用的微弱尝试。
回答by Bastiaan Linders
If you are using HTML5, then I assume you are OK using CSS3 too:
如果您使用的是 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>
...
But to be honest, i think you are better off by just floating 6 divs in a box twice the width of the divs:
但说实话，我认为你最好在一个盒子中浮动 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>
回答by sobiech
For NO CSS3 solution use jQuery plugin: http://welcome.totheinter.net/columnizer-jquery-plugin/
对于没有 CSS3 解决方案，请使用 jQuery 插件：http: //welcome.totheinter.net/columnizer-jquery-plugin/
Example: http://welcome.totheinter.net/autocolumn/sample1.html
示例：http: //welcome.totheinter.net/autocolumn/sample1.html
It's working for IE6+, FF2+, safari, chrome, opera :)
它适用于 IE6+、FF2+、safari、chrome、opera :)
