複数列レイアウト (複数列)
複数段レイアウトとは、テキスト コンテンツを新聞のような複数段レイアウトに設計することです。つまり、以前は js や JQuery を通じて実現できていたウォーターフォール フローが、互換性の問題はありますが、CSS3 では CSS を通じて直接実現できるようになります。 。
互換性
IE10+、FireFox16+、Chrome26+、Safari6.1+、Opera12.1
複数列レイアウトのプロパティ
CSS3 は、次の表に示すように、複数列レイアウトを実装するための一連のプロパティを提供します。
1.columns はオブジェクトの列数と各列の幅を設定します。
オブジェクトの列数と各列の幅を設定または取得します。
文法：
列:<'列幅'>||<'列数'>;
パラメータの説明:
(1) 最初のパラメータは各列の幅を指します。
(2) 2 番目のパラメータは列の数を指します。 2つまたは1つを書くことができます。
2つのパラメータは列数を優先します(下げる場合)。幅が十分でない場合（列数 * 設定された幅 > コンテナの幅）、自動的に 1 列削減され、コンテナの幅に達するまで段落の幅が自動的に広げられます。中央に適切な間隔が自動的に生成されます。
例：
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>複数列レイアウト</title><style>*{margin:0;padding:0;}div.test1,div.test2{border :20pxsolidrgba(0,0,0.3);}div.test1{width:900px;-webkit-columns:300px4;-moz-columns:300px4;columns:300px4;}div.test1>div{margin-top:20px; border:2pxsolidred;}div.test2{-webkit-columns:400px;-moz-columns:400px;columns:400px;}div.test2>div{margin-top:20px;border:2pxsolidred;}</style>< /head><body><div><div>C 言語の発明者であるデニス・リッチーによる発明の当初の位置づけから、それはグラフィック ソフトウェアそのものではなくシステムであり、開発ドライバーを含める必要があることがわかります。 、システム カーネル、ファイル管理、内部管理、ネットワーク通信などの一連のコア タスクを実行します。したがって、C 言語の構文を学習するだけで、オペレーティング システムの原理、通信プロトコル、コンパイラの原則とデータ構造については、前述の要件を満たします。 </div><div>このとき、英語のマザーボードのマニュアルを見ると、どのインターフェイスを読めばよいのか、通信プロトコルはどのように規定されているのか、何バイト読めばよいのか…などが事前に分かります。書けるのはドライバーだけで、カーネルは通信に使えるので、社会における人材の需要が比較的少なくても、仕事が見つからないという問題はありません。あなたは仕事を選択し、その仕事にお金を払うことさえできます。なぜなら、これらを実行できるだけでなく、ドライバ開発、DNS解決、ウイルス対策、通信セキュリティ、仮想化テクノロジ、カーネルプルーニングなどの多くの関連タスクもすべて有能だからです。新しいオペレーティング システムを自分で開発することもできます。 </div><div>とはいえ、現在の環境では、ほとんどの大学での C 言語の教育指向は、C 言語コースに加えて、データ構造、コンピュータ アーキテクチャ、コンパイラ原理、コースも提供すべきなのは一部の大学だけです。そのため、C 言語はプログラミングの啓蒙としてのみ位置づけられており、プロセス指向の思考と C に慣れていれば十分です。言語の構文。 </div><div>学校は、C 言語を学んだ後、C++ や Java などの高級言語を学び、より実用的なものを作ることができ、より意欲的に仕事を見つけることができることを望んでいます。成功するには、C 言語を使用するだけで済みます。これ以上学習する必要はありません。Java や C++ などの高級言語を基礎から学ぶだけです。実はこれが専門職と養成機関の違いです。知識を無駄に学ばないで、それが役立つかどうかをもっと考えるべきです。 </div></div><br><div><div>現在の全体的な環境から判断すると、主要な大学でコンピュータ/ソフトウェアを専攻している場合は、これらの実際の教材に熱心に取り組む必要があります。国の教育リソースを無駄にしないでください。なぜなら、あなたには国の IT ソフトウェア業界の将来に責任があるからです。ソフトウェアの研究開発/開発に携わりたいのであれば、少なくともデータ構造をよく学ばなければなりません。 、コピーではなく、ペーストコードポーター。ただ生活費を稼ぎたいなら、結果を出せる技術を学べばいいのです。 </div><div>最後に、学生が C 言語を学習する一般的な目的を見てみましょう。短期大学から学士号、大学院入試、および第 2 レベルの C 言語に至るまで、需要志向のチュートリアルは主に次のようなものに基づいています。理論的な質問、練習問題、試験があるため、プロジェクト タイプの C 言語リソースはそれほど難しくないため、当然のことながらグラフィックなものはほとんど表示されません。もちろん、C 言語の熱心なサポーターとして、Dotcpp は将来的にプログラミング リソースも強化し、すべての人に十分なリソース サポートを提供する予定です。 </div><div>C 言語を学習するとき、コンソール プログラムを選択するため、プログラムは黒いウィンドウで実行されますが、Windows アプリケーションを作成する場合は、そのような黒いウィンドウは存在せず、C 言語の構文が実行されます。まだ使用されている、誰もが理解できます。 </div><div>純粋な C 言語でのグラフィカル開発の場合は、段階に応じて、TurBoC コンパイラがサポートするグラフィック インターフェイス機能を使用するか、VC6 に easyX ライブラリをインストールしてグラフィカル開発を実現することを検討できます。バックギャモン、テトリス、ピンボール ゲーム、スネークなど、すべてグラフィカルでインタラクティブな一部のゲームでは、画像の更新や専門的な向上を考慮して、MFC または QT の使用を検討できます。 </div></div></body></html>実行結果:
div.test1 の列を 300px 4 に設定します。つまり、各列の幅は 300px で、合計 4 つの列がありますが、コンテナーは 900px で、1200px より小さいため、列数は自動的に調整されます。縮小され、列幅が適切に拡大されて、最も適切な方法で表示されます。ただし、div.test2 ではコンテナの幅は設定されず、列幅は 300px、列数は 4 列に設定されます。列幅を最適化するために列数が制限されます。
注: div.test1 の列を 300px 4 に設定します。つまり、各列の幅は 300px で、合計 4 つの列がありますが、コンテナーは 900px で 1200px 未満であるため、列の数は自動的に縮小され、列幅が適切に拡大されて、最適な表示方法が実現されます。ただし、div.test2 ではコンテナの幅は設定されず、列幅は 300px、列数は 4 列に設定されます。列幅を最適化するために列数が制限されます。
2. column-width は列幅を設定します。
文法：
columns-width:<length>|自動デフォルト;
: 長さの値を使用して列の幅を定義します。負の値は許可されません。 auto: 列の数に応じて幅をカスタマイズします。
列幅は設定されていますが、列数とコンテナの幅に基づいて自動的に割り当てられます。
PS: 各列のギャップは 14 ピクセルです。
3. columns-count は列数を設定します。
オブジェクトの列数を設定または取得します。
文法：
列数：<整数>|自動;
パラメータの説明:: 整数値を使用して列数を定義します。負の値は許可されません。 auto: 列幅に応じて割り当て幅をカスタマイズします。
4. column-gap は列間のギャップを設定します。
オブジェクトの列間のギャップを設定または取得します。
文法：
列ギャップ：<長さ>|通常;
パラメータの説明: 長さの値を使用して列間の間隔 (単語間の距離ではなく、段落間の距離) を定義します。負の値は許可されません。通常: フォント サイズと同じです。標準の間隔はフォント サイズによって異なります。フォントサイズと同じです。
例：
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>複数列レイアウト</title><style>*{margin:0;padding:0;}div.test1,div.test2,div .test3{border:20pxsolidrgba(0,0,0.3);}div.test1>div,div.test2>div,div.test3>div{背景色:rgb(0,0,0,.3);margin -top:20px;}div.test1{幅:900px;列:300px4;フォントサイズ:14px;}div.test2{列:400px;フォントサイズ:30px;}div.test3{列数:4; column-gap:14px;}</style></head><body><h3>フォント: 14px、ギャップ設定なし: デフォルトはフォント 14px と同じです;</h3><div><div>多数C 言語を学んだ人はいますか? 私の友人が C 言語を振り返ると、必ずこの疑問を抱くでしょう。なぜ C 言語は常に黒いウィンドウで実行されるのですか?三角形の面積を計算したり、水仙の数を出力したりするプログラムですか?たとえプログラミングがどれほど素晴らしかったとしても、なぜそのような素晴らしいソフトウェアをまだ実行できないのでしょうか?結局のところ、それはただ子供っぽいだけです。なぜ。 </div><div>まず、C 言語の発明の位置づけですが、C 言語の発明者であるデニス・リッチーによる発明の当初から、C 言語はグラフィック ソフトウェアそのものではなく、システムであることがわかっていました。これには、ドライバーの開発、システム カーネルの作成、ファイル管理、内部管理、ネットワーク通信などの一連のコア タスクが含まれます。 </div><div>第二に、中国における一般的な教育の位置付けとはいえ、現在の環境では、ほとんどの大学の C 言語の教育の位置付けは、C 言語のコースに加えてデータ構造を提供する必要があるのは一部の大学のみです。 、コンピュータアーキテクチャ、コンパイラの原則、オペレーティングシステムの原則、その他のコース。 </div><div>さらに、万安県規律検査監督委員会は、県教育スポーツ局、県市場品質監督局、県市場品質監督局などの関連部門や職員の職務遂行状況を調査した。建田郷政府の責任者、県教育スポーツ局、県市場品質監督局、県農業局、県保健家族計画委員会、建田郷政府およびその他の関連部門の責任者。職務を遂行できなかった者は、個別に訴訟を起こして審査した。同時に、郡規律検査・監督委員会は学生の栄養給食の入札プロセスに関する調査を実施し、結果が分かり次第一般に公表する予定だ。 </div></div><br><h3>フォント: 30 ピクセル、ギャップ設定なし: デフォルトはフォントと同じ 30 ピクセルです。</h3><div><div>C 言語を勉強した友人がたくさんいますC を振り返っています 言語に関して言えば、次のような疑問が必ず出てきます。なぜ C 言語は黒いウィンドウで実行されるのですか?三角形の面積を計算したり、水仙の数を出力したりするプログラムですか?たとえプログラミングがどれほど素晴らしかったとしても、なぜそのような素晴らしいソフトウェアをまだ実行できないのでしょうか?結局のところ、それはただ子供っぽいだけです。なぜ。 </div><div>まず、C 言語の発明の位置づけですが、C 言語の発明者であるデニス・リッチーによる発明の当初から、C 言語はグラフィック ソフトウェアそのものではなく、システムであることがわかっていました。これには、ドライバーの開発、システム カーネルの作成、ファイル管理、内部管理、ネットワーク通信などの一連のコア タスクが含まれます。 </div><div>第二に、中国における一般的な教育の位置付けとはいえ、現在の環境では、ほとんどの大学の C 言語の教育の位置付けは、C 言語のコースに加えてデータ構造を提供する必要があるのは一部の大学のみです。 、コンピュータアーキテクチャ、コンパイラの原則、オペレーティングシステムの原則、その他のコース。 </div><div>第三に、C 言語を使用してそれを行うこともできますが、C 言語を学習する場合はコンソール プログラムを選択するため、プログラムは黒いウィンドウで実行されます。 Windows アプリケーションを作成する場合、そのような黒いウィンドウは存在せず、誰もが理解できる C 言語の構文のままです。 </div></div><br><h3>フォント: 30px、設定ギャップ: 14px;</h3><div><div>C 言語を勉強したことのある多くの友人は、C 言語を振り返ると必ず知っているでしょう。質問があります。なぜ C 言語は黒いウィンドウで実行されるのですか?三角形の面積を計算したり、水仙の数を出力したりするプログラムですか?たとえプログラミングがどれほど素晴らしかったとしても、なぜあの素晴らしいソフトウェアをまだ実行できないのでしょうか? 結局のところ、それはただ子供っぽいだけです。なぜ。 </div><div>まず、C 言語の発明の位置づけですが、C 言語の発明者であるデニス・リッチーによる発明の当初から、C 言語はグラフィック ソフトウェアそのものではなく、システムであることがわかっていました。これには、ドライバーの開発、システム カーネルの作成、ファイル管理、内部管理、ネットワーク通信などの一連のコア タスクが含まれます。 </div><div>第二に、中国における一般的な教育の位置付けとはいえ、現在の環境では、ほとんどの大学の C 言語の教育の位置付けは、C 言語のコースに加えてデータ構造を提供する必要があるのは一部の大学のみです。 、コンピュータアーキテクチャ、コンパイラの原則、オペレーティングシステムの原則、その他のコース。 </div><div>第三に、C 言語を使用してそれを行うこともできますが、C 言語を学習する場合はコンソール プログラムを選択するため、プログラムは黒いウィンドウで実行されます。 Windows アプリケーションを作成する場合、そのような黒いウィンドウは存在せず、誰もが理解できる C 言語の構文のままになります。 </div></div></body></html>実行結果:
5. column-rule は列間の境界線を設定します
文法：
列ルール:<列ルールの幅>||<列ルールのスタイル>||<列ルールの色>
パラメータの説明
● column-rule-width 境界線の太さ
●段罫スタイル 枠線スタイル
●column-rule-color 境界線の色
PS: 列間の間隔が境界線の幅より小さい場合、列が境界線を覆う状況が発生するという事実に特に注意してください。
(1)列ルールの幅
オブジェクトの列間の境界線の太さを設定または取得します。
文法：
列ルール幅：<長さ>|薄い|中|厚い;
パラメータの説明
●長さ: 長さの値を使用して境界線の太さを定義します。負の値は許可されません。
●medium: 境界線のデフォルトの太さを定義します。
●thin: デフォルトの太さよりも薄い境界線を定義します。
●thick: デフォルトの太さよりも太い境界線を定義します。
(2) column-rule-style は境界線のスタイルを設定します
オブジェクトの列間の境界線スタイルを設定または取得します。
文法
列ルールのスタイル: なし|非表示|点線|破線|実線|二重|溝|リッジ|インセット|アウトセット;
パラメータの説明
●なし：輪郭なし。
●hidden: 境界線を非表示にします。
●点線：点線の輪郭。
●破線: 破線の輪郭。
●solid: 実線の輪郭。
●double：二重線のアウトライン。
●溝：3D溝プロファイル。
●リッジ：3D凸型溝プロファイル。
●インセット: 3D 凹面エッジ輪郭。
●アウトセット：3Dコンベックスエッジアウトライン。
注: 2 本の線で構成されるアウトラインがある場合、幅には 2 本の線の間の距離が含まれます。
(3) column-rule-color は境界線の色を設定します
オブジェクトの列間の境界線の色を設定または取得します。
文法：
列ルールの色:<色>;
パラメータの説明: 色を指定します。幅とスタイルがなければ、色は失敗します。デフォルトの黒。
6. columns-span は要素がすべての列にまたがるように設定します
オブジェクト要素がすべての列にまたがるかどうかを設定または取得します。
文法：
列スパン: なし|すべて;
パラメータの説明: none: 列にまたがりません all: すべての列にまたがります。
これは、他の列属性のようにコンテナ内では使用されませんが、コンテナの子要素内で使用されます。
7. columns-fill は列の高さを統一するように設定します (現時点では主流のブラウザとは互換性がありません)
オブジェクトのすべての列の高さが均一かどうかを設定または取得します。
文法：
列の塗りつぶし:自動デフォルト|バランス;
パラメータの説明: auto: 列の高さの適応コンテンツ、バランス: すべての列の高さが最も高い列に統一されます。
主要なブラウザはこの属性に対応していません。
8. 列区切りは改行を設定します
●column-break-beforeは、指定したオブジェクトの前で改行するかどうかを設定します。
●column-break-afterは、指定したオブジェクトの後で改行するかどうかを設定します。
●column-break-insideはオブジェクト内で改行するかどうかを設定します。
(1)列区切り前
オブジェクトを設定または取得する前に改行するかどうか。
文法：
列区切り前: 自動|常に|回避;
パラメータの説明: auto: 要素の前での改行と新しい列の生成を強制も禁止もしない; always: 常に要素の前で改行と新しい列の生成を回避: 要素の前での改行と新しい列の生成を回避します。
(2)列区切り後
オブジェクトの設定または取得後に改行するかどうか。
文法：
列区切り後：自動|常に|回避;
パラメータの説明: auto: 要素の後に改行して新しい列を生成することを強制も禁止もしません; always: 要素の後に改行して新しい列を生成します; 回避: 要素の後に改行して新しい列を生成することを避けます。
(3) 列ブレークインサイド属性
オブジェクト内で改行するかどうかを設定または取得します。
文法：
列区切り内部:autodefault|回避