#container { display:-moz-box; display:-webkit-box; } #left-sidebar { width: 200px; padding: 20px; background-color: orange; } #contents { width: 300px; padding: 20px; background-color: yellow; } #right-sidebar { width: 200px; padding: 20px; background-color: limegreen; } #left-sidebar, #contents, #right-sidebar { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } #container { display: -moz-box; display: -webkit-box; -moz-box-orient:vertical; -webkit-box-orient:vertical; } #left-sidebar { -moz-box-ordinal-group: 3; -webkit-box-ordinal-group: 3; width: 200px; padding: 20px; background-color: orange; } #contents { -moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; -webkit-box-flex: 1; -moz-box-flex: 1; width: 300px; padding: 20px; background-color: yellow; } #right-sidebar { -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; width: 200px; padding: 20px; background-color: limegreen; } #left-sidebar, #contents, #right-sidebar { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } #container { display: -moz-box; display: -webkit-box; border: 5px solid blue; -moz-box-orient: vertical; -webkit-box-orient: vertical; width: 500px; height: 300px; } #text-a { background-color: orange; -moz-box-flex: 1; -webkit-box-flex: 1; } #text-b { background-color: yellow; -moz-box-flex: 1; -webkit-box-flex: 1; } #text-c { background-color: limegreen; } #text-a, #text-b, #text-c { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
css3 レイアウト_html/css_WEB-ITnose について話す
float 属性またはposition 属性レイアウトを使用するデメリット
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> div { width: 20em; float: left; } #div1 { margin-right: 2em; } #div3 { width: 100%; background-color: yellow; height: 200px; } </style></head><body> <div id="div1"> <p> 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 </p> </div> <div id="div2"> <p> 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 </p> </div> <div id="div3"> 页面中其它内容 </div></body></html>上記のコードを使用すると、ページは次のように表示されます。上記の例 例えば、画像を追加すると
その場合、表示されるページの効果は次のようになります(つまり、2つの要素の位置合わせを求めることができません)
それでは、この問題をどのように解決するか
複数列レイアウトが CSS3 に追加されました。複数列レイアウトを使用すると、要素内のコンテンツを複数の列に分割して表示し、各列のコンテンツの下部を確実に揃えることができます。主に次の属性を使用できます
column-count: 表示する列の数
column-width: 現在表示されている列の幅
column-gap: 複数の列間の間隔
column-rule : 列の間にスペーサー線を追加し、スペーサー線の幅や色などを設定します
一般的なボックスレイアウト
一般的なページレイアウトは、次の例のように左、中央、右に分かれています
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> #left-sidebar { float: left; width: 200px; padding: 20px; background-color: orange; } #contents { float: left; width: 300px; padding: 20px; background-color: yellow; } #right-sidebar { float: left; width: 200px; padding: 20px; background-color: limegreen; } #left-sidebar, #contents, #right-sidebar { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } </style></head><body> <div id="container"> <div id="left-sidebar"> <h2>左侧边栏</h2> <ul> <li><a href="#">超链接</a></li> <li><a href="#">超链接</a></li> <li><a href="#">超链接</a></li> <li><a href="#">超链接</a></li> <li><a href="#">超链接</a></li> </ul> </div> <div id="contents"> <h2>内容</h2> <p> 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 </p> </div> <div id="right-sidebar"> <h2>右侧边栏</h2> <ul> <li><a href="#">超链接</a></li> <li><a href="#">超链接</a></li> <li><a href="#">超链接</a></li> </ul> </div> </div></body></html>
コードの実行 最終的なインターフェース効果は次のとおりです:
float 属性またはposition 属性を使用すると、左右または複数の列の div 要素の下部が揃っていないことがわかります
ボックス レイアウトを使用します
以下のボックス レイアウトを使用します 下部を揃えるには、上記の CSS を次のように変更します:
#container { display:-moz-box; display:-webkit-box; } #left-sidebar { width: 200px; padding: 20px; background-color: orange; } #contents { width: 300px; padding: 20px; background-color: yellow; } #right-sidebar { width: 200px; padding: 20px; background-color: limegreen; } #left-sidebar, #contents, #right-sidebar { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }ログイン後にコピー
#container { display:-moz-box; display:-webkit-box; } #left-sidebar { width: 200px; padding: 20px; background-color: orange; } #contents { width: 300px; padding: 20px; background-color: yellow; } #right-sidebar { width: 200px; padding: 20px; background-color: limegreen; } #left-sidebar, #contents, #right-sidebar { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }実際、これは、最も外側の div で display:box を使用し、その div の float:left 属性を削除することを意味します。インターフェイス 実行時の効果図は次のとおりです:
ちなみに、ボックスを使用する場合と複数列レイアウトを使用する場合の違いは次のとおりです: 1. 複数列レイアウトの各列の幅2. 複数段レイアウトの場合、どの列に何を表示するかを指定することはできません。 コンテンツ、つまり複数段レイアウトは、記事の内容を表示するのに適しており、さまざまな要素の構造を配置するのには適していません。 Web ページ全体の幅です
アダプティブ ウィンドウのフレキシブル ボックス レイアウトを使用します
上記の例では、必要に応じて、これら 3 つの div の合計幅はブラウザ ウィンドウの幅と等しくなります。つまり、幅に応じて変化します。
実際には、 -webkit-box を真ん中の div に追加するだけで十分です。 CSS コードは次のとおりです:
#container { display:-moz-box; display:-webkit-box; } #left-sidebar { width: 200px; padding: 20px; background-color: orange; } #contents { -webkit-box-flex:1; -moz-box-flex:1; width: 300px; padding: 20px; background-color: yellow; } #right-sidebar { width: 200px; padding: 20px; background-color: limegreen; } #left-sidebar, #contents, #right-sidebar { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }インターフェイスの操作効果は次のとおりです:
要素の表示順序を変更します
では、要素の表示順序を変更するにはどうすればよいですか? たとえば、左側が必要です。一番右に表示する列と、左に表示するコンテンツ列をどうすればよいでしょうか？
css3 には、各要素の表示順序を変更するための属性 box-ordinal-group が用意されています。CSS を見ると、その中の各 div に box-ordinal-group を追加するだけで、簡単に表示を変更できます。順序
#container { display: -moz-box; display: -webkit-box; } #left-sidebar { -moz-box-ordinal-group: 3; -webkit-box-ordinal-group: 3; width: 200px; padding: 20px; background-color: orange; } #contents { -moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; -webkit-box-flex: 1; -moz-box-flex: 1; width: 300px; padding: 20px; background-color: yellow; } #right-sidebar { -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; width: 200px; padding: 20px; background-color: limegreen; } #left-sidebar, #contents, #right-sidebar { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }インターフェースのレンダリングは次のとおりです (すごいですね):
要素の配置方向を変更する
要素の配置方向を変更したい場合は、box-orient を使用できますCSS3では複数の要素の配置方向を指定します。 box-orient 属性を最も外側の div に追加するだけです。 CSS コードは次のとおりです:
#container { display: -moz-box; display: -webkit-box; -moz-box-orient:vertical; -webkit-box-orient:vertical; } #left-sidebar { -moz-box-ordinal-group: 3; -webkit-box-ordinal-group: 3; width: 200px; padding: 20px; background-color: orange; } #contents { -moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; -webkit-box-flex: 1; -moz-box-flex: 1; width: 300px; padding: 20px; background-color: yellow; } #right-sidebar { -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; width: 200px; padding: 20px; background-color: limegreen; } #left-sidebar, #contents, #right-sidebar { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }ログイン後にコピー
#container { display: -moz-box; display: -webkit-box; -moz-box-orient:vertical; -webkit-box-orient:vertical; } #left-sidebar { -moz-box-ordinal-group: 3; -webkit-box-ordinal-group: 3; width: 200px; padding: 20px; background-color: orange; } #contents { -moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; -webkit-box-flex: 1; -moz-box-flex: 1; width: 300px; padding: 20px; background-color: yellow; } #right-sidebar { -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; width: 200px; padding: 20px; background-color: limegreen; } #left-sidebar, #contents, #right-sidebar { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }インターフェースはすぐに完全に変更されました
要素の幅と高さの適応性
ボックス レイアウトを使用する場合、要素の幅と高さは適応的です。つまり、要素の幅が配置方向の変更に応じて高さと高さも変更できます
以下の例を見てください。HTML インターフェイス コード全体は次のとおりです:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> #container { display: -moz-box; display: -webkit-box; border: 5px solid blue; -moz-box-orient: horizontal; -webkit-box-orient: horizontal; width: 500px; height: 300px; } #text-a { background-color: orange; } #text-b { background-color: yellow; } #text-c { background-color: limegreen; } #text-a, #text-b, #text-c { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } </style></head><body> <div id="container"> <div id="text-a">示例文字A</div> <div id="text-b">示例文字B</div> <div id="text-c">示例文字C</div> </div></body></html>
インターフェイスの効果は次のとおりです:
When we上記のコードコンテナを変更します。 内部の CSS は次のとおりです (つまり、垂直方向に配置を変更します):
#container { display: -moz-box; display: -webkit-box; border: 5px solid blue; -moz-box-orient: vertical; -webkit-box-orient: vertical; width: 500px; height: 300px; }インターフェイスのレンダリングは次のとおりです:
フレキシブルボックスレイアウトを使用して、白い部分を削除しますスペース
上の効果を見てください。コンテナには常に大きな空白領域が残っていると考えているはずです。それを削除するにはどうすればよいでしょうか?実際、これは CSS3 のフレキシブル ボックス レイアウトを使用することで解決できます。つまり、配置に参加する複数の要素の幅と高さの合計が常にコンテナーの幅と高さに等しくなります
上記のコードを変更してみましょう(配置方向を horizontal に設定し、中央のサブディビジョンに box-flex 属性を追加します)
CSS スタイルは次のとおりです:
#container { display: -moz-box; display: -webkit-box; border: 5px solid blue; -moz-box-orient: horizontal; -webkit-box-orient: horizontal; width: 500px; height: 300px; } #text-a { background-color: orange; } #text-b { background-color: yellow; -moz-box-flex:1; -webkit-box-flex:1; } #text-c { background-color: limegreen; } #text-a, #text-b, #text-c { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }インターフェイスの表示効果は次のとおりです
もちろん、できますまた、配置方向を垂直に設定すると、インターフェイスは次のようになります
複数の要素で box-flex 属性を使用します
今度は、box-flex を中央のサブディビジョンに追加するだけでなく、最初のサブディビジョンに box-flex を実行すると、結果はどうなるでしょうか
#container { display: -moz-box; display: -webkit-box; border: 5px solid blue; -moz-box-orient: vertical; -webkit-box-orient: vertical; width: 500px; height: 300px; } #text-a { background-color: orange; -moz-box-flex: 1; -webkit-box-flex: 1; } #text-b { background-color: yellow; -moz-box-flex: 1; -webkit-box-flex: 1; } #text-c { background-color: limegreen; } #text-a, #text-b, #text-c { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }ログイン後にコピー
#container { display: -moz-box; display: -webkit-box; border: 5px solid blue; -moz-box-orient: vertical; -webkit-box-orient: vertical; width: 500px; height: 300px; } #text-a { background-color: orange; -moz-box-flex: 1; -webkit-box-flex: 1; } #text-b { background-color: yellow; -moz-box-flex: 1; -webkit-box-flex: 1; } #text-c { background-color: limegreen; } #text-a, #text-b, #text-c { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }如果三个子div都加上box-flex属性，那么每个div高度等于容器的高度除以3，也就是效果图所示所示：
其实box-flex:1就是让其占据刚刚好的宽度，也就是说除去其它的部分，它刚好占满全部
你动手去尝试一下用box-flex:2，会发现box-flex:2并非box-flex:1的两倍就是这个道理，1只是代表单位像素，也就是刚刚好的宽高，并非代表数值
指定水平方向与垂直方向的对齐方式
在css2中，如果想方案水平居中就只能用text-align:center，但是却不能让文字垂直居中，在css3中，只要让div元素使用box-align属性就行了。
示例代码
div { display: -moz-box; display: -webkit-box; -moz-box-align: center; -webkit-box-align: center; -moz-box-pack: center; -webkit-box-pack: center; width: 200px; height: 100px; background-color: pink; }
如果在div容器中放入“示例文字”这几个字，界面运行效果就会如下所示：（同样，如果我们在div里面放入图像也是可以实现水平和垂直方向居中的）
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7456
15
1376
52
77
11
17
10
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
