マルチコラムレイアウト(複数列)CSS3は、従来のHTMLページブロックレイアウトモードの新たな展開に強いです。この新しい構文では、開発者が容易にマルチカラム表示をレンダリングするWEBテキストを行うことができます。目ならば、次の行の先頭に変更し、テキストの一端から他端までのビューの人々のポイントを、そして、我々は間違ったラインを読んだり、シリアルを読み取ることが可能である、テキストの行が長すぎるとき、読者がより激しい読まれることを知っていますモバイル大きすぎる浮動、彼らの注意は、行かないで読みやすい減少します。だから、大画面ディスプレイの使用における最大効率のために、ページデザインの必要性は、テキストが新聞でニュースを公開するように、複数の列が提示するように、テキストの幅を制限します。しかし、CSS3のマルチカラムのレイアウト(列)の前に、関数の構文が表示され、あなたが複数列のテキスト表示に人々をしたいか、絶対位置を使用している場合、テキストの段落に手動ポイント、またはJSスクリプトを使用、などが、完全に変更され、新たな構文の出現、そのようなAの状況。
いくつかは、そのようなIE9 / IE8などのブラウザのマルチカラムレイアウト機能をサポートしていないために、それは従来のシングルブロックレイアウトのレイアウトを提示して、これらの属性のすべてが、無視されます。Googleのブラウザ-webkit-、Firefoxの-moz-:ブラウザとの互換性を最大限に確保するために、我々は複数列のレイアウトプロパティを使用し、それが3つのタイプを追加し、プレフィックスブラウザエンジンを追加することが最良である最も基本的な、IEブラウザは-ms-、最終的には、接頭辞を記述することなく、忘れてはいけません。
表1に詳細に記載されるように3つの列が、パラメータはカラム幅として、それぞれ設定することができる列数、列ギャップ、カラムルールをレイアウトがあります。
表1 CSS3の列レイアウトパラメータ説明
そして、列幅の数
列数と列幅:あなたがテキストの一部をしたいどのように多くの列どんなにが表示されていた、あなただけの2つのプロパティを必要とします。
次のように(1)、記事のセット2の列カウントを使用して:
これは、コンテンツ内のテキストは、私たちが列カウント互換性のあるブラウザを使用し、(例えばFirefoxやGoogle Chromeの、IE10 +、などなどの新しい構文をサポートするために、まずお使いのブラウザの)2のように表示されるようになりますファイルを開くためのHTMLブラウザ、図1に示す効果:
図1列カウントカラムレイアウト
(2)column-width属性控制列的宽度。如果你没有提供column-count属性值,那么,浏览器就是自主决定将文本分成合适的列数。将上例的CSS代码替换如下:
这将会使文本里的内容被分成若干列,每列的宽度为10em,分栏效果如图2所示:
图2 column-width分栏布局
2 列之间的缝隙间隔宽度
两列之间会有缝隙间隔。缺省情况下这个间隔宽度是1em,但如果你使用column-gap属性,就会修改这个缺省的宽度值,将上例的分栏宽度为20em,分栏间隔为2em。将上例的CSS代码替换如下:
这将会使文本里的内容被分成若干列,每列的宽度为20em,分隔间隔为2em,效果如图3所示:
图3 column-gap分栏间隔
3 分栏间隔符
column-rule的语法如下:
column-rule: column-rule-width column-rule-style column-rule-color;
column-rule属性是一个简写属性,用于设置所有column-rule-* 属性。它们的参数及描述如表2:
表2 column-rule参数取值及描述
其中,column-rule-style有以下可选值,它们的取值及描述如表3:
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
表3 column-rule-style参数取值及描述
下面,我们将把文本分为三栏,并给出2em的缝隙间隔,每栏间隔都给一个黑色的虚线间隔符。CSS代码如下:
这将会使文本里的内容被分三列,分隔间隔为2em,分隔符为黑色虚线,效果如图4所示:
图4 column-rule分栏符
CSS3的多列布局(columns)是一种方便WEB开发者高效利用宽屏显示器的非常有用的功能特征。你会发现在很多地方都需要用到它们,特别是需要自动平衡列高度的地方。