「 Multi-column 」は中国語で「マルチカラム」と訳されます。 この「 Multi-column 」は、W3C によって CSS3 に追加されたマルチカラム レイアウト モジュール (CSS Multi-column Layout Module) です。 。これは主にテキストの複数段のレイアウトに使用されます。このレイアウトは新聞や雑誌で何十年も使用されているので、誰もがよく知っていると思います。以下の図に示すように、Web ページ上のテキストの複数列レイアウトを実装する必要があります。
上の図の 2 列レイアウトについては、Web siege エンジニアにとってはまだかなり難しいと思います。それを実装します。ただし、CSS3 の「マルチカラム」は、上記のマルチカラム レイアウトを解決するのに役立ちます。したがって、Web シージ エンジニアは、この新しい設計方法を習得したことになり、同じ新しいテクノロジーも習得したことになります。 . CSS3の「マルチカラム」の使い方と注意点を見ていきましょう。
CSS3 の「複数列」は、大きなブロックに応じて主に次のブロックに分かれています:
1. 列数と列幅 : 列数; 列幅
2. 列間隔列の配置スタイル : 列の規則の色; 列の規則の幅
3. 列の分割前; -inside;4. 列全体: 列スパン;
5. 列を埋める: 列を埋める。
今日から、いくつかのセクションを使って上記の各部分を紹介します。最初の部分 列数と列幅:
列数列数の関数:主に Multi 要素の列数を記述するために使用されます
column-count 構文:column-count: auto || 数字
1. auto: この値は、column-count が何も設定されていない場合のデフォルト値です。値、デフォルト値は auto です。このときの列数は、列幅などの他のパラメータに基づいて決定されます。数値: 任意の正の整数を使用できます。複数の要素を表す 分割する列の数。
上の図からわかるように、IE はこの属性をサポートしていませんが、Firefox と Webkit では、独自のプライベート属性 -moz と -webkit が必要です。記述方法は次のとおりです:
/*Firefox*/ -moz-column-count:auto || 数字; /*Webkit*/ -webkit-column-count:auto || 数字; /*W3C标准*/ column-count:auto || 数字; /*Opera11.0+*/
<div class="demo">Lorem ipsum dolor sit ... deserunt mollit anim id est laborum.</div>
.demo { width: 400px; border: 1px solid #ccc; padding: 10px; }
.columnCountAuto { -moz-column-count: auto; -webkit-column-count: auto; column-count: auto; -moz-column-width: 193px; -webkit-column-width: 193px; column-width: 193px; }
上記は、値が auto の場合の columns-count の使用法です。次に、値が特定の値である場合のアプリケーションを見てみましょう。前の例に基づいて、列の数を 3 に変更します。
column-width = (width-(n-1)*font-size)/n /*其中n大于或等于2;并且其他值为默认值*/
2. column-width
column-width 関数: この属性は、Multi 要素の列幅を制御するために使用されます
.columnCountLength{ -moz-column-count:3; -webkit-column-count:3; column-count:3; }
1.
また、w3c 標準構文は現在、Firefox、Safari、および Chrom でのみサポートされています。次のような独自のプレフィックスを使用する必要があります:
/*Firefox*/ -moz-column-width:<length> || auto; /*Webkit*/ -webkit-column-width:<length> || auto; /*W3C*/ column-width:<length> || auto;
了解完column-width的属性等相关知识后,首先来看一个普通的例子,这里所说的普通就是指,元素分列的列宽不指定确定的宽度值,并且其他参数都为默认值,如:
.columnWidth { -moz-column-width: auto; -webkit-column-width: auto; column-width: auto; }
从效果中清楚的知道,给Multi元素仅设置auto是没有任何效果的,因为此时的值是需要根据元素的列数来定的,在这里并没有指定列数的值,所以默认为1列
在上面的实例的基础上,变通一下,给他加上一个column-count:2:
.columnWidthCount { -moz-column-width: auto; -webkit-column-width: auto; column-width: auto; -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; }
这个再次说明,当column-width为auto时需要配合column-count的设置才能有分列效果。
下面一起来看两个比较特殊的实例,假设现在列宽为195px,同时列之间的距离为0;而且他们之间没有任何样式:
.columnWidthBig { -moz-column-width: 195px; -webkit-column-width: 195px; column-width: 195px; -moz-column-gap: 0; -webkit-column-gap: 0; column-gap: 0; -moz-column-rule: 0 none; -webkit-column-rule: 0 none; column-rule: 0 none; }
此时两列的宽度为了填补列与列之间的空间,他们两列的宽度自动变成了200px。大家还可以测试一下,当你把column-gap样式禁掉时,此时列只会显示一列,前面也说过,如果没有显示设置column-gap值时,其值大小会根据你所设置的font-size来定,因此容器无法容现两列的位置,从而第一列宽度扩展到容器大小一样。
接着来看第二个特殊效果,就是当列的宽度大于元素容器的宽度
.columnWidthBig2 { -moz-column-width: 450px; -webkit-column-width: 450px; column-width: 450px; -moz-column-gap: 0; -webkit-column-gap: 0; column-gap: 0; -moz-column-rule: 0 none; -webkit-column-rule: 0 none; column-rule: 0 none; }
上图效果告诉我们,虽然设置的列宽大于元素容器的宽度,但并不会让元素内容按列的宽度进行布局而撑破元素容器。他只会把列宽降到与元素容器宽度相等。
综合上述各种情形,为了分列能适应各种屏幕大小,最好设置一个确切的列宽或者列数,并相应指定相关属性,比如元素的width,column-gap,column-rule-width等,如果column-gap,column-rule-width使用默认值,在多列设计中最好明确写定好column-width和column-count的值。
上面分别介绍了使用column-count和column-width来分列布局,其实这两个属性可以合并在一起使用,这就是要介绍的有关于Multi-columns中的第三个属性columns。columns是把前面两个属性合并在一起使用,先来看其语法吧:
columns: column-width || column-count
column-width和column-count分别是指列的宽度和列数;
这种简写格式只有在webkit和opera下支持,为了兼容Firefox浏览器,个人建议拆分书写更为安全。
下面一起来看一个简写的例子吧:
.columns { -webkit-columns: 2 180px; columns: 2 180px; }
上图上在Opera11+和Webkit下的效果,在Firefox5版本及其以下版本是没有任何效果的。这样一来,我个人认为如果需要兼容更多的浏览器,最好不要使用合并的columns功能,具体原因我想不需要我说大家都非常清楚。那么有关于 CSS3 Multi-columns 中的第一部分: 列数和列宽(column-count和column-width) 就介绍完了,下一节将继续其中的第二部分: 列的间距和分列样式 。感兴趣的朋友请继续观注。
如需转载烦请注明出处:W3CPLUS