css将表格两列合并到一列_CSS列

css将表格两列合并到一列

One major gripe that we've always had about CSS is that creating layouts seems to be more difficult than it should be. We have, of course, adapted and mastered the techniques for creating layouts, but there's no shaking the feeling that there should be a better properties available. One of the newer CSS properties at our disposal is the column set of properties; these properties allow us to create columned containers without the hassle of floats, clears, margins, and more.

我们一直以来对CSS的主要抱怨是，创建布局似乎比应有的困难。 当然，我们已经适应并掌握了创建布局的技术，但是丝毫没有感到应该有更好的属性可用的感觉。 我们可以使用的较新CSS属性之一是属性的列集。 这些属性使我们可以创建带列的容器，而无需麻烦的浮点，清除，边距等。

View Demo 观看演示

CSS (The CSS)

CSS' column feature contains a few different properties that work together to create the desired column set:

CSS的列功能包含一些不同的属性，这些属性可以一起创建所需的列集：

• column-count: number of columns desired

  column-count ：所需的列数

• column-gap: gap between columns

  column-gap ：列之间column-gap

• column-width: suggests an optimal column width; not an absolute value that will be used, but will be the basis for the browser's own calculations

  column-width ：建议最佳列宽； 不是将要使用的绝对值，而是浏览器自己计算的基础

• column-rule-width

  column-rule-width

• column-rule-style

  column-rule-style

• column-rule-color

  column-rule-color

• column-span: allows elements to span multiple columns

  column-span ：允许元素跨越多列

• column-fill: how contents are partitioned into columns

  column-fill ：如何将内容划分为列

For the purposes of elegant styling, you'll at least want to use column-count and column-gap:

为了实现优雅的样式，您至少要使用column-count和column-gap：

/* 3 columns of list items will display with a 10 pixel gap between columns */
ul.col-3 {
	column-count: 3;
	column-gap: 10px;
}

If you're looking to add column rules, those are easy to add as well:

如果您要添加列规则，那么这些规则也很容易添加：

/* 3 columns of list items will display with a 10 pixel gap between columns, gold column rule */
ul.col-3 {
	column-count: 3;
	column-gap: 10px;
	column-rule: 1px solid #fc0;
}

Specific elements will even span columns if you so choose:

如果您选择以下内容，则特定元素甚至会跨越列：

/* Assume this HTML:

<div class="col-3">
	<h3>Heading!</h3>
	<div>Section 1</div>
	<div>Section 2</div>
	<div>Section 3</div>
	<div>Section 4</div>
	<div>Section 5</div>
	<div>Section 6</div>
	<div>Section 7</div>
	<div>Section 8</div>
	<div>Section 9</div>
	<div>Section 10</div>
	<div>Section 11</div>
	<div>Section 12</div>
</div>

 */
div.col-3 {
	column-count: 3;
	column-gap: 5px;
}

div.col-3 h2 {
	column-span: all;
	text-align:center;
	background: #eee;
}

Simply CSS columns -- exactly what we've been looking for!

只需CSS列-正是我们一直在寻找的东西！

View Demo 观看演示

Using CSS columns has its advantages: you don't need to do your own math, you can avoid modulus-based calculations on the server side for breaking based on content length, and if nothing else, you have a semantic way of creating columned layouts!

使用CSS列有其优点：您不需要自己做数学，就可以避免在服务器端基于基于模数的计算来根据内容长度进行破坏，并且如果没有其他要求，您可以通过语义方式创建列式布局！

翻译自: https://davidwalsh.name/css-columns

css将表格两列合并到一列