css柱状图_CSS布局：报纸样式的柱状文字

css柱状图

Creating a newspaper or magazine-style layout, in which text flows between multiple columns, has not been seriously approached in web design until very recently. Currently, the technique remains a draft proposal for CSS3.

直到最近，在网页设计中还没有认真研究过创建报纸或杂志风格的布局，使文本在多列之间流动。 目前，该技术仍是CSS3的提案草案。

Continuous multiple-column text design for the web is also somewhat controversial: there is an argument to be made that users have been habituated into reading most web sites like a book, from one edge of the page to the other, and that forcing text into a magazine-style layout is actually a step backwards. However, with a little bit of cleverness, we can actually have the best of both worlds.

Web上的连续多列文本设计也颇有争议：有人争论说，用户习惯于从页面的另一端阅读另一本书之类的大多数网站，并且迫使文本进入杂志式的布局实际上是倒退的一步。 但是，只要一点点机灵，我们就可以同时拥有两全其美的优势。

First, the text to be divided into columns must be in a single container - most likely, but not exclusively, a div:

首先，要分为几列的文本必须在单个容器中-最有可能但并非唯一地是div ：

<div id="columns">
	<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>

Second, our CSS divides this div up into a series of columns. I'll demonstrate the technique without vendor prefixes:

其次，我们CSS将div分为一系列列。 我将演示没有供应商前缀的技术：

div#columns {
	column-count: 2;
	column-gap: 2em;
	column-rule: 5px solid black;
}

This declaration divides the <div> into two equal width columns, automatically balancing the text between both. The columns are separated by 2em and a black rule five pixels wide. It is a fluid design: the height of the columns changes as text is added or removed, or if the overall width of the container changes, but there are always two columns.

该声明将<div>分为两个相等宽度的列，自动平衡两者之间的文本。 列之间用2em和一个黑色规则隔开，五个像素宽。 这是一种流畅的设计：当添加或删除文本时，或者如果容器的整体宽度发生变化时，列的高度都会发生变化，但是总会有两列。

This layout also gracefully degrades rather neatly: if a browser does not understand the properties, the text is simply displayed normally in the container <div>.

此布局还可以很好地降级：如果浏览器不了解这些属性，则仅在容器<div>正常显示文本。

A solution with greater fluidity is to set column-width rather than column-count, allowing the browser to determine just how many columns there should be, based on the width of the container:

流动性更大的解决方案是设置column-width而不是column-count ，这允许浏览器根据容器的宽度确定应该有多少列：

div#columns {
	column-width: 15em;
	column-gap: 2em;
	column-rule: 5px solid black;
}

Now the number of columns created is determined by the overall width of our wrapper

<div> – so long the <div> can be wholly divided with columns that are 15em wide with appropriate gaps and rules, the browser will add columns. If the <div> is less than 34em wide ( (2 × 15em) + 4em for the gap) the text will fall into a single column.

<div>的整体宽度决定–只要<div>可以被15em宽的列完全划分，并带有适当的间距和规则，浏览器就会添加列。 如果<div>宽度小于34em ( (2×15em)+ 4em的间隙)，则文本将落入一列。

Text is automatically balanced between columns, by default; if you want to fill the columns from left-to-right, use column-fill: auto.

默认情况下，文本在列之间自动平衡； 如果要从左到右填充列，请使用column-fill: auto 。

It's not currently possible to wrap column text around floated elements, although it is possible to fake the appearence of such, using a either a background image (shown above), or faking the columns themselves.

尽管无法通过使用背景图像(如上所示)或伪造列本身来伪造此类文本的出现，但当前无法在浮动元素周围包裹列文本。

Newspaper-style columnar layout on the web remains controversial and cutting-edge. On the other hand, it does gracefully degrade. Going forward, columnar text layout will likely become a strong visual component in web pages, if used carefully and appropriately.

网络上的报纸式柱状布局仍然存在争议和前沿。 另一方面，它的确降级了。 展望未来，如果谨慎和适当地使用，列式文本布局将很可能成为网页中的重要视觉组件。

You may find that the lead text in the first column is out of vertical alignment with other text; this can be treated by removing its margin-top. As an example, the CSS might be:

您可能会发现第一栏中的引导文本与其他文本没有垂直对齐； 这可以通过删除其margin-top 。 例如，CSS可能是：

#columns p:first-of-type {
	margin-top: 0;
}

翻译自: https://thenewcode.com/79/CSS-Layouts-Newspaper-Style-Columnar-Text

css柱状图