CSS3 チュートリアル (6): Web サイト用に複数の列を作成する_css3_CSS_Web ページ制作

Web ページ制作 Webjx 記事の紹介: CSS3 を使用して、各列に特定のレイヤーや段落を開発することなく、Web サイトに複数の列を作成します。 CSS3 を使用すると、各列に特定のレイヤーや段落を持たなくても、Web サイトに複数の列を作成できます。 前回の記事: CSS3 チュートリアル (5): Web ページの背景画像と複数の背景画像

CSS3 を使用すると、各列に特定のレイヤーや段落を指定することなく、Web サイトに複数の列を作成できます。
CSS3 を使用すると、各列に特定のレイヤーや段落を開発することなく、ウェブサイトに複数の列を作成できます。
前の記事: CSS3 チュートリアル (5): Web ページの背景画像
複数の背景画像と同様に、CSS3 の複数列も私のお気に入りのテクノロジーの 1 つです。この CSS3 プロパティには、新聞や雑誌のレイアウト以外にも多くの潜在的な用途があると思います。このメソッドをアイデアや個人の Web サイトで使用する場合は、下のコメントにリンクを送信してください。このメソッドが多くのレイアウトで使用できることを確認させていただきます。
ブラウザ間の互換性:
CSS3 マルチカラムをサポートする優れたブラウザは Firefox、Safari、Google Chrome であるため、-moz および -webkit プレフィックスを使用する必要があります。 CSS3 複数列 (幅)

上のスクリーンショットは、次の CSS3 スタイルを使用した結果です。
#multiColumnWidth { text-align: justify; -moz-column-width: 20em; moz -column-gap: 2em; -webkit-column-width: 20em;
ブラウザのサポート:

Firefox(3.05…)

Google Chrome(1.0.154…) Google Chrome(2.0.156…)

Internet Explorer(IE7, IE8 RC1)

Opera(9.6…)

Safari(3.2.1 windows…) CSS3 複数列(列数)

上記のスクリーンショットこれは、次の CSS3 スタイルを使用する効果です。デデデ ; -webkit-column-count: 3; -webkit-column-gap: 1.5em; -webkit-column-rule: 1px ソリッド #dedede; }

ブラウザのサポート:

Firefox(3.05…) 1.0.154…)

Google Chrome(2.0.156…)

Internet Explorer(IE7, IE8 RC1)

Opera(9.6…)

Safari(3.2.1 windows…)

上記はCSS3チュートリアルです(6 ): Web サイト multi-column_css3_CSS_ Web ページ制作コンテンツを作成します。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。