DIV+CSS Web ページのレイアウト: 2 列のlayout_html/css_WEB-ITnose-htmlチュートリアル-php.cn

DIV+CSS Web ページのレイアウト: 2 列のlayout_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:24:11

オリジナル

1349 人が閲覧しました

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>

ログイン後にコピー