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

WBOY
リリース: 2016-06-24 11:24:11
オリジナル
1723 人が閲覧しました

1. 幅適応型 3 列レイアウト

3 列レイアウトの原理は、中央に 1 列追加するだけであることを除き、2 列レイアウトと同じです。幅適応型 2 列レイアウトの 3 列の幅を再計算して、幅適応型 3 列レイアウトを実現します。

同じ理由で、それ以上の列のレイアウトは、実際には 2 列と 3 列のレイアウト モードと同じです。

 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:100%;14     overflow:hidden;15 }16 #main .main-left{17     width:25%;18     height:800px;19     background:red;20     float:left;21 }22 #main .main-center{23     width:50%;24     height:800px;25     background:lightgreen;26     float:left;27 }28 #main .main-right{29     width:25%;30     height:800px;31     background:pink;32     float:right;33 }34 #footer{35     height:50px;36     background:gray;37 }38 </style>39 </head>40 <body>41 <div id="herder">页头</div>42 <div id="main">43     <div class="main-left">左列</div>44     <div class="main-center">中间</div>45     <div class="main-right">右列</div>46 </div>47 <div id="footer">页脚</div>48 </body>49 </html>
ログイン後にコピー

2. 左右の列は固定幅で、中央のコンテンツ幅は適応型です

左右の列の幅が固定で、中央の幅が適応型であるレイアウトを実現したい場合は、フロートを使用すると、ページが乱雑になります。1 行に 3 つの列を固定するには、絶対位置を使用する必要があります。

れーい

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート