兄弟HTML5 CSS3効果のITバンドチュートリアルCSS3プロパティサブ列レイアウト

5f16a58a57bc47108e1c532aebeafd05.jpg

マルチコラムレイアウト(複数列)CSS3は、従来のHTMLページブロックレイアウトモードの新たな展開に強いです。この新しい構文では、開発者が容易にマルチカラム表示をレンダリングするWEBテキストを行うことができます。目ならば、次の行の先頭に変更し、テキストの一端から他端までのビューの人々のポイントを、そして、我々は間違ったラインを読んだり、シリアルを読み取ることが可能である、テキストの行が長すぎるとき、読者がより激しい読まれることを知っていますモバイル大きすぎる浮動、彼らの注意は、行かないで読みやすい減少します。だから、大画面ディスプレイの使用における最大効率のために、ページデザインの必要性は、テキストが新聞でニュースを公開するように、複数の列が提示するように、テキストの幅を制限します。しかし、CSS3のマルチカラムのレイアウト(列)の前に、関数の構文が表示され、あなたが複数列のテキスト表示に人々をしたいか、絶対位置を使用している場合、テキストの段落に手動ポイント、またはJSスクリプトを使用、などが、完全に変更され、新たな構文の出現、そのようなAの状況。

いくつかは、そのようなIE9 / IE8などのブラウザのマルチカラムレイアウト機能をサポートしていないために、それは従来のシングルブロックレイアウトのレイアウトを提示して、これらの属性のすべてが、無視されます。Googleのブラウザ-webkit-、Firefoxの-moz-:ブラウザとの互換性を最大限に確保するために、我々は複数列のレイアウトプロパティを使用し、それが3つのタイプを追加し、プレフィックスブラウザエンジンを追加することが最良である最も基本的な、IEブラウザは-ms-、最終的には、接頭辞を記述することなく、忘れてはいけません。

表1に詳細に記載されるように3つの列が、パラメータはカラム幅として、それぞれ設定することができる列数、列ギャップ、カラムルールをレイアウトがあります。

表1 CSS3の列レイアウトパラメータ説明

 

画像/ 20191115 / 874824184d83f91c2768bfa00ec12522

   

 

そして、列幅の数

列数と列幅:あなたがテキストの一部をしたいどのように多くの列どんなにが表示されていた、あなただけの2つのプロパティを必要とします。

次のように(1)、記事のセット2の列カウントを使用して:

画像/ 20191115 / da691eed83dcd39d5f8b62885064c84c

 

これは、コンテンツ内のテキストは、私たちが列カウント互換性のあるブラウザを使用し、(例えばFirefoxやGoogle Chromeの、IE10 +、などなどの新しい構文をサポートするために、まずお使いのブラウザの)2のように表示されるようになりますファイルを開くためのHTMLブラウザ、図1に示す効果:

画像/ 20191115 / d0fda681c92719529424fb3280362e32

図1列カウントカラムレイアウト

 

(2)column-width属性控制列的宽度。如果你没有提供column-count属性值,那么,浏览器就是自主决定将文本分成合适的列数。将上例的CSS代码替换如下:

画像/ 20191115 / 26d4471132e4b6b6b2b17cf96684292f

 

这将会使文本里的内容被分成若干列,每列的宽度为10em,分栏效果如图2所示:

画像/ 20191115 / 9b3516e77108956d99c6150e803d4379

图2  column-width分栏布局

 

2  列之间的缝隙间隔宽度

两列之间会有缝隙间隔。缺省情况下这个间隔宽度是1em,但如果你使用column-gap属性,就会修改这个缺省的宽度值,将上例的分栏宽度为20em,分栏间隔为2em。将上例的CSS代码替换如下:

画像/ 20191115 / 06fc4f28e551fe9958e5149694d35733

 

这将会使文本里的内容被分成若干列,每列的宽度为20em,分隔间隔为2em,效果如图3所示:

画像/ 20191115 / 5db79e86e4f2f61d0d0e0e4bfce32d48

图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参数取值及描述

 

画像/ 20191115 / b4858e3daa786a25640bd9220122f343

 

其中,column-rule-style有以下可选值,它们的取值及描述如表3:

column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

表3  column-rule-style参数取值及描述

 

画像/ 20191115 / 02b7d9edb0d85889c07c1fb5d083a7f6

 

下面,我们将把文本分为三栏,并给出2em的缝隙间隔,每栏间隔都给一个黑色的虚线间隔符。CSS代码如下:

画像/ 20191115 / 20e01b165698370782b5e4635b3e2c41

 

这将会使文本里的内容被分三列,分隔间隔为2em,分隔符为黑色虚线,效果如图4所示:

画像/ 20191115 / f58414c46e2d6108c475e37bcb7c5d13

图4 column-rule分栏符

 

CSS3的多列布局(columns)是一种方便WEB开发者高效利用宽屏显示器的非常有用的功能特征。你会发现在很多地方都需要用到它们,特别是需要自动平衡列高度的地方。

おすすめ

転載: www.cnblogs.com/itxdl/p/11895468.html