「CSS3 実践戦闘」ノート複数列layout_html/css_WEB-ITnose

書籍「CSS3 Practical Combat」を読んで勉強することによる要約
「CSS3 Practical Combat」/Cheng Lin. - 北京機械工業新聞 2011.5

複数列レイアウトは、新聞や新聞などの純粋なテキスト レイアウト デザインに適しています。雑誌の Web ページのレイアウト。Web ページの構造レイアウトには適していません。複数列レイアウト機能を柔軟に使用すると、テキストや画像を複数列に表示できるため、Web ページのスペースを大幅に節約できます。 Web ページ上のテキストが非常に長い場合は、複数列レイアウト機能が有効になることがあります。
互換性リファレンス: http://www.w3.org/TR/css3-multicol/

columns 属性 – 複数列レイアウトを定義します

columns は、border 属性と同様に、複数列レイアウト機能の基本属性です。境界線機能では、このプロパティは複数の列の数と各列の幅を同時に定義できます。基本的な構文は次のとおりです:

columns ： <column-width> || <column-count>

値の簡単な説明:

<column-width>:定义每列的宽度。<column-count>:定义列数。

column-width 属性: 列幅を定義します

column-count 属性: 列数を定義します

column-width:<length> | auto column-count:<integer> | auto

値の簡単な説明:

: float ポイント番号とユニット識別子で構成される長さの値。負の値は指定できません。
auto: ブラウザの計算値に基づいて自動的に設定されます。
: 列内の列数を定義します。値は 0 より大きい整数です。 column-width プロパティと column-count プロパティに明示的な値が指定されていない場合、その値は最大列数になります。

column-gap 属性 – 列間隔を定義します

column-gap：normal | <length>

値の簡単な説明:

normal: ブラウザのデフォルト設定に従って解析されます (通常は 1em)。
: 浮動小数点数とユニット識別子で構成される長さの値。負の値にすることはできません。

column-rule 属性 – 列境界線のスタイルを定義します

column-rule：<length> | <style> | <color> | <transparent>

値の簡単な説明:
: 浮動小数点数と単位識別子で構成される長さの値。負にすることはできません。この機能は、column-rule-width 属性と同じです。