css3多列布局_CSS布局：多列

css3多列布局

If you have a web page layout with divided text that does not need to flow between columns, then the CSS setup is fairly easy. Using our Straight & Narrow design as a starting point, wrap each separate text column in a div:

如果你有一个不需要列之间流动分为文字的网页布局，那么CSS设置是相当容易的。 以我们的Straight＆Narrow设计为起点，将每个单独的文本列包装在div ：

<div id="col1">
	<p>Hey, did you know that the modern necktie originates in the cravats worn by Croatian mercenaries during the Thirty Years War almost four hundred years ago? From that kick-ass origin, ties have become the sartorial choice of dandies, fops, and Organization Men of all stripes. Boring!
	<p>While we don’t make ties that are capable of staunching aortal bleeding from a musket-ball wound, our extra-skinny, super-strong ties could be used as a garrotte – or a tourniquet, if you wished.
	<p>Lorem ipsum dolor sit amet…
</div>

Then simply float one beside the other:

然后简单地将一个float另一个旁边：

div#column1 {
	width: 40em;
	float: left;
}
div#column2 {
	margin-left: 42em;
}

We simply use the same technique that we did for a single column next to a captioned image. It’s also possible to give both columns the same fluid width:

我们只是使用与为带字幕的图像旁边的单个列所做的相同技术。 也可以使两列的流体宽度相同：

div#column1 {
	width: 45%;
	float: left;
}
div#column2 {
	margin-left: 50%;
}

There are, however a few problems with this. It is difficult to give both columns the appearance of the same height, and vertical alignment at the top of the columns can be tricky. It is at this point that most developers return to tables in frustration, but that is not necessary.

但是，这存在一些问题。 很难使两个列的外观都具有相同的height ，并且列顶部的垂直对齐可能很棘手。 在这一点上，大多数开发人员都沮丧地返回表，但这不是必需的。

显示：表 (display: table)

Think for a moment of how a

table processes its content. In a table, the height of a row – and thus the height of all cells in that row – is determined by the content of the largest cell. A table caption is always, by default, at the top of the table, center-aligned to the table width.

表如何处理其内容。 在表格中，一行的高度(以及该行中所有单元格的高度)由最大单元格的内容确定。 默认情况下，表格标题始终位于表格顶部，并与表格宽度居中对齐。

We don’t want to actually use a table to organize our site: that is non-semantic, and difficult to maintain. Tables remain solely for tabular data. What we want to do to our divs is to tell them that they act, and display, like table cells.

我们实际上不想使用表格来组织我们的网站：这是非语义的，并且难以维护。 表仅保留用于表格数据。 我们要对div进行的操作是告诉他们，它们像表单元格一样起作用并显示。

This is simple in CSS:

这在CSS中很简单：

div#column1, div#column2 {
	display: table-cell;
	width: 50%;
}

Both of these divs are now the same height. The height of all the divs with display: table-cell is determined by the highest <div>. You can prove this by placing a border or background-color for both <div> elements:

现在，这两个div的高度相同。 display: table-cell的所有div的高度由最高的<div>确定。 您可以通过为两个<div>元素放置border或background-color来证明这一点：

div#column1, div#column2 {
	display: table-cell;
	width: 50%;
	padding: 2em;
	border-bottom: 5px solid black;
}

翻译自: https://thenewcode.com/77/CSS-Layouts-Multiple-Columns

css3多列布局