ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS3 複数列の列番号と列幅_html/css_WEB-ITnose

CSS3 複数列の列番号と列幅_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:19:19
オリジナル
1192 人が閲覧しました

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+*/
ログイン後にコピー

次に、簡単な段落 Demo を作成します

HTML コード

<div class="demo">Lorem ipsum dolor sit ... deserunt mollit anim id est laborum.</div>
ログイン後にコピー

CSS コード

.demo {     width: 400px;     border: 1px solid #ccc;     padding: 10px;  }
ログイン後にコピー

まず、最初のケースを見てみましょう: columns-count:auto。前に述べたように、column-count 値が auto の場合、要素の列は、column-width などの他の属性によって決定されます。具体的には、コードがどのように実装されるかを見てみましょう。が auto の場合、デフォルト値は auto であるため、明示的に設定する必要はありません。そのため、上記のコードで column-count:auto を削除して、結果が同じかどうかを確認してください。ここで説明する必要があるのは、表示される列の数を制御するために column-width のみを使用する場合、column-width の値は次の式で計算される値を超えてはいけないということです:

.columnCountAuto {	-moz-column-count: auto;	-webkit-column-count: auto;	column-count: auto;	-moz-column-width: 193px;	-webkit-column-width: 193px;	column-width: 193px;  }
ログイン後にコピー

この例を見てみましょう、n =2,font-size:14px; この場合、column-width の値は (400-14)/2=193px になります (Opera では 1 ピクセル減らすのが最善です。もちろん、次のようにするのも最善です)中国人の場合も同様です。理由は説明できませんが、1 ~ 2 ピクセルを減らしてください。); 列幅の値を 193 ピクセルより大きく設定した場合、通常は上記の式で計算された値が 1 列のみ表示されます。 (その他の関連する値はデフォルト値です)。

効果:

上記は、値が auto の場合の columns-count の使用法です。次に、値が特定の値である場合のアプリケーションを見てみましょう。前の例に基づいて、列の数を 3 に変更します。

column-width = (width-(n-1)*font-size)/n  /*其中n大于或等于2;并且其他值为默认值*/
ログイン後にコピー

効果:

上記のレンダリングからわかるように、Multi 要素の列数を指定している限り、その数に基づいて各列の幅を計算できます。計算式も上に示したとおりであり、前提条件は同じです。関連するパラメータはデフォルト値です。

2. column-width

column-width 関数: この属性は、Multi 要素の列幅を制御するために使用されます

column-width 構文:

.columnCountLength{     -moz-column-count:3;     -webkit-column-count:3;     column-count:3;   }
ログイン後にコピー

値の説明:

1.

auto

: この値はデフォルト値です。 column-width 設定値が auto であるか、明示的な設定値がない場合、Multi 要素の列幅は他の属性によって決定されます。たとえば、前の例では、column-count (もちろん、column の値) によって決定されます。 -count はできません。自動です。それ以外の場合は効果がありません);

: この値は、固定値を使用して Multi 要素の幅を設定します。単位は px または em です。ただし、負の値は指定できません。

互換性のあるブラウザ:

また、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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート