ホームページ > 記事 > ウェブフロントエンド > DIV+CSS Web ページのレイアウト: 2 列のlayout_html/css_WEB-ITnose
DIV+CSS Web ページのレイアウト: 2 列のlayout_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:24:111347ブラウズ
1. 幅適応型 2 列レイアウト
2 列レイアウトは、左の列を左のフロートに設定し、右の列を右のフロートに設定することでマージンを設定する必要がなくなります。
要素が float を使用すると、周囲の要素に影響を与えるため、float をクリアする必要があります。通常は 2 つの方法が使用されます。影響を受ける要素に対して clear:both を設定できます。これは、要素の両側のフロートをクリアすることを意味します。また、フロートのどちら側をクリアするかを設定することもできます。ただし、どちら側を明確に知っておく必要があります。フローティングエフェクトをクリアする必要があります。フローティング親コンテナの幅を設定するか、100% に設定し、同時に overflow:hidden を設定すると、フロートをクリアする効果も得られます。
同様に、2つの列の幅もパーセンテージに従って幅を設定するだけで済み、ブラウザウィンドウが調整されると、コンテンツのサイズがパーセンテージに従って自動的に調整されます。窓の大きさに合わせて。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>宽度自适应两列布局</title> 6 <style> 7 *{margin:0;padding:0;} 8 #herder{ 9 height:50px;10 background:blue;11 }12 .main-left{13 width:30%;14 height:800px;15 background:red;16 float:left;17 }18 .main-right{19 width:70%;20 height:800px;21 background:pink;22 float:right;23 }24 #footer{25 clear:both;26 height:50px;27 background:gray;28 }29 </style>30 </head>31 <body>32 <div id="herder">页头</div>33 <div class="main-left">左列</div>34 <div class="main-right">右列</div>35 <div id="footer">页脚</div>36 </body>37 </html> 2. 固定幅 2 列レイアウト
幅適応型 2 列レイアウトは一般に Web サイトで使用されることはほとんどなく、最もよく使用されるのは固定幅 2 列レイアウトです。
固定幅の 2 列レイアウトを実現するには、左右の列をラップする、つまり親コンテナを追加して、親コンテナの幅を固定するだけで済みます。親コンテナの幅が固定されると、これら 2 つの列を特定のピクセル幅に設定できるため、固定幅の 2 列レイアウトが実現します。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>固定宽度两列布局</title> 6 <style> 7 *{margin:0;padding:0;} 8 #herder{ 9 height:50px;10 background:blue;11 }12 #main{13 width:960px;14 margin:0 auto;15 overflow:hidden;16 }17 #main .main-left{18 width:288px;19 height:800px;20 background:red;21 float:left;22 }23 #main .main-right{24 width:672px;25 height:800px;26 background:pink;27 float:right;28 }29 #footer{30 width:960px;31 height:50px;32 background:gray;33 margin:0 auto;34 }35 </style>36 </head>37 <body>38 <div id="herder">页头</div>39 <div id="main">40 <div class="main-left">左列</div>41 <div class="main-right">右列</div>42 </div>43 <div id="footer">页脚</div>44 </body>45 </html> 3. 2 列中央揃えのアダプティブ レイアウト
同様に、親コンテナの幅を指定して、親コンテナを水平方向に中央揃えするだけです。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>两列居中自适应布局</title> 6 <style> 7 *{margin:0;padding:0;} 8 #herder{ 9 height:50px;10 background:blue;11 }12 #main{13 width:80%;14 margin:0 auto;15 overflow:hidden;16 }17 #main .main-left{18 width:20%;19 height:800px;20 background:red;21 float:left;22 }23 #main .main-right{24 width:80%;25 height:800px;26 background:pink;27 float:right;28 }29 #footer{30 width:80%;31 height:50px;32 background:gray;33 margin:0 auto;34 }35 </style>36 </head>37 <body>38 <div id="herder">页头</div>39 <div id="main">40 <div class="main-left">左列</div>41 <div class="main-right">右列</div>42 </div>43 <div id="footer">页脚</div>44 </body>45 </html> 4. 固定幅横 2 列レイアウト
1 列レイアウトと同様に、すべてのブロックをコンテナに含めることができます。これは、設定には便利ですが、意味のないコードが追加されます。親コンテナの幅を指定してから、中央のボディをフロートさせます。
れーい