今回は CSS を使用して 3 列レイアウトを実装する方法をいくつか紹介します。 CSS を使用して 3 列レイアウトを実装するための 注意事項 は何ですか?実際の事例をいくつか紹介します。
はじめに
実際、3 列レイアウトであろうと 2 列レイアウトであろうと、私たちは日常のプロジェクトでよくそれを使用します。 2 列レイアウトとは何か、ということはよくわかりますが、実際には 3 列レイアウトの 1 つまたは 2 つの方法をすでに使用しているかもしれませんが、実際の操作ではその 1 つの方法のみをこの記事で紹介します。 3カラムレイアウトの概要と利用シーンを紹介します。 いわゆる3カラムレイアウトとは、ページを左、中、右の3つの部分に分割し、その真ん中の部分を適応させるレイアウト方法を指します。1.絶対配置メソッド
HTMLコードは次のとおりです:<p class="left">Left</p> <p class="main">Main</p> <p class="right">Right</p>
//简单的进行CSS reset body,html{ height:100%; padding: 0px; margin:0px; } //左右绝对定位 .left,.right{ position: absolute; top:0px; background: red; height:100%; } .left{ left:0; width:100px; } .right{ right:0px; width:200px; } //中间使用margin空出左右元素所占据的空间 .main{ margin:0px 200px 0px 100px; height:100%; background: blue; }
2. 聖杯のレイアウト
HTML コードは次のとおりです://注意元素次序 <p class="main">Main</p> <p class="left">Left</p> <p class="right">Right</p>
//习惯性的CSS reset body,html{ height:100%; padding: 0; margin: 0 } //父元素body空出左右栏位 body { padding-left: 100px; padding-right: 200px; } //左边元素更改 .left { background: red; width: 100px; float: left; margin-left: -100%; position: relative; left: -100px; height: 100%; } //中间部分 .main { background: blue; width: 100%; height: 100%; float: left; } //右边元素定义 .right { background: red; width: 200px; height: 100%; float: left; margin-left: -200px; position: relative; right: -200px; }
関連する説明は次のとおりです:
(1) 中間部分は次のとおりです。ブラウザの幅の変化に合わせて変化するので、100%にするには、ここでは左、中、右を左に浮かせます。真ん中が100%なので、左と右のレイヤーはまったく上に移動する位置がありません。 (2) 左レイヤーのマージンをマイナス 100 した後、外側にマイナスなので、左が上に行くことがわかります。ウィンドウには位置がなく、上に移動することしかできません (3) 2 番目のステップによると、左端の位置に到達するには、負のマージンを使用して左列と右列を配置するだけでよいと結論付けることができます (4) しかし、左列と右列が中央部分をブロックしているため、相対位置決めメソッドが使用され、それぞれがそれ自体に対して相対的に移動して最終結果を取得します3. 二重飛行翼のレイアウト
HTML コードは次のとおりです:<p class="main"> <p class="inner"> Main </p> </p> <p class="left">Left</p> <p class="right">Right</p>
//CSS reset body,html { height:100%; padding: 0; margin: 0 } body { /*padding-left:100px;*/ /*padding-right:200px;*/ } .left { background: red; width: 100px; float: left; margin-left: -100%; height: 100%; /*position: relative;*/ /*left:-100px;*/ } .main { background: blue; width: 100%; float: left; height: 100%; } .right { background: red; width: 200px; float: left; margin-left: -200px; height: 100%; /*position:relative;*/ /*right:-200px;*/ } //新增inner元素 .inner { margin-left: 100px; margin-right: 200px; }
4. フローティング
のHTMLコードは次のとおりです://注意元素次序 <p class="left">Left</p> <p class="right">Right</p> <p class="main">Main</p>
//CSS reset body,html { height:100%; padding: 0; margin: 0 } //左栏左浮动 .left { background: red; width: 100px; float: left; height: 100%; } //中间自适应 .main { background: blue; height: 100%; margin:0px 200px 0px 100px; } //右栏右浮动 .right { background: red; width: 200px; float: right; height: 100%; }
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
CSS3を使用して明るい正方形の境界線を実装
CSSを使用してマウスアップアイコンの回転を作成
以上がCSS には 3 列レイアウトを実装する方法がいくつかありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。