ページ上のさまざまな列レイアウトの CSS 実装の例

この記事では、ページに 1 列レイアウト、2 列レイアウト、3 列レイアウトを実装するための CSS メソッドの例を主に紹介します。これには、適応的な幅と高さの例も含まれます。必要な場合は、以下を参照してください。 1 列レイアウト (単一列レイアウトとも呼ばれます)

1 列レイアウトでは、ブロック レベルの要素と行レベルの要素、およびマージン属性を含む 3 つの知識ポイントを習得する必要があります。 1列レイアウトを実装するためのキーコードは margin 属性によって実装され、 margin:0 auto; を設定することで水平方向のセンタリングを実現します。 auto はブラウザの幅に応じて両側のマージンを自動的に設定することを意味します。マージンを設定するには、まずボックス モデル (ここでは div など) を用意し、次にその長さと幅を固定サイズに設定してセンタリングを実現する必要があります。

<style type="text/css">
    body{margin:0;padding:0;}
    .head{heigth:200px;background:blue;}
    .main{height:500px;width:800p;margin:0 auto;}
    .footer{background:blue;height:200px;width:800px;margin:0 auto;}
</style>
<div class="head"> This is head !</div>
<div class="main"> This is main !</div>
<div class="footer"> This is footer !</div>

2. 2 列レイアウト (2 列アダプティブ)

フローティング: ブロックレベルの要素を行ごとに配置する必要がある場合は、フローティングを使用する必要があります。 CSS の float のレイアウトでは、float には 3 つの属性値があります。left-left float、right-right float、none-not float です。 float 属性が設定されると、要素は、要素の端に達するまで、それに応じて左または右に移動します。
要素にコンテンツがなく、float 属性が設定されている場合、コンテンツの変更に応じて要素の幅も変化します。
フロートをクリアする一般的な方法は次のとおりです: Clear: Both; (クリアする必要がある要素に設定)。通常、Clear: right/left を使用して確実にクリアすることもできます。 float をクリアする別の方法があります。 width: 100%;

<style type="text/css">
    body{margin:0;padding:0;}
    .main{width:800px;margin:0 auto;}
    .left{width:20%;height:500px;background:blue;float:left;}
    .right{width:80%;background:red;height:500px;float:right;}
</style>
<div class="main">
    <div class="left"> This is left !</div>
    <div class="right"> This is right !</div>
</div>

親 div を追加した後、右側と左側のブロックは親の幅に制限されます。ブロックの左右の幅も固定されますが、親ブロックの幅が変わると左右のブロックも変更され、比率は 2:8 のまま固定されます。

3. 3 列レイアウト

position は、static (静的配置)、relative (相対配置)、absolute (絶対配置)、fixed (固定配置) の 4 つの属性値を設定できます。上記の 2 列レイアウトの割合を 33.33% に変更するだけで、同様に、4 列レイアウト アダプティブでも同じ方法を使用して割合の配分を調整し、希望のレイアウトを実現できます。

<style type="text/css">
    body{margin:0;padding:0;}
    .main{width:800px;margin:0 auto;}
    .left{width:33.33%;height:500px;background:blue;float:left;}
    .middle{width:33.33%;height:500px;background:black;float:left;}
    .right{width:33.33%;background:red;height:500px;float:right;}
</style>
<div class="main">
    <div class="left"> This is left !</div>
    <div class="middle"> This is middle !</div>
    <div class="right"> This is right !</div>
</div>

もう 1 つの状況は、左側と右側のブロックの幅がそれぞれ 200px と 300px に固定されているのに対し、中央は適応型であるということです。この場合、float では実現できません。このとき、左右のブロックを絶対に配置し、中央のブロックのマージンを設定する必要があります。中央と左右の部分がぴったりとくっつかないようにしたい場合は、余白（上、右、下、左）を設定するときにピクセルを適切に増やすことができます。実装方法は以下の通りです:
注意 left:0;top:0;right:0;top:0; これらの設定は追加しないと問題が発生します。 1 列レイアウトのメイン ブロックに 2 列レイアウトまたは 3 列レイアウトを挿入するなど、上記のレイアウト方法を組み合わせます。コードは基本的に上記と同じです

BFC の原理を使用して実装します

1 つ。 BFC のルールの 1 つは BFC エリアとフロート ボックスの重複であるため、これを利用して 3 列のレイアウトを実現できます。

CSSコードは次のとおりです

<style type="text/css">
    body{margin:0;padding:0;}
    .main{width:800px;margin:0 auto;}
    .left{width:200px;height:500px;background:blue;position:absolute;left:0;top:0;}
    .middle{height:500px;background:black;margin:0 300px 0 200px;}
    .right{width:300px;background:red;height:500px;position:absolute;right:0;top:0;}
</style>
<div class="main">
    <div class="left"> This is left !</div>
    <div class="middle"> This is middle !</div>
    <div class="right"> This is right !</div>
</div>

htmlコードは次のとおりです

.left {   
  float: left;   
  margin-right: 10px;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
}   
.rightright {   
  float: rightright;   
  margin-left: 10px;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
}   
.main {   
  height: 100px;   
  background-color: green;   
  overflow: hidden;   
}

ダブルフライングウィングレイアウト

このレイアウトスキームは、主にメイン列を最初にロードできるように、淘宝網によって最初に提案されました。

実装原則:

(1) メイン列の外側にラップを追加し、メイン列をラップし、2 つのサブ列を左側にフローティングします。

(2) メインカラムの折り返し幅を100%に設定し、サブカラムが左右に配置されるようにサブカラムのmargin-leftをマイナスの値に設定します。 (3) メインカラムの margin-left と margin-right が左右のカラムの幅より少し大きい場合、メインカラムとサブカラムの間隔を設定できます。
cssコードは次のとおりです

<div class="left"></div>  
<div class="right"></div>  
<div class="main"></div>

htmlコードは次のとおりです

.wrap {   
  width: 100%;   
}   
.wrap::after {   
  display: block;   
  content: '';   
  font-size: 0;   
  height: 0;   
  clear: both;   
  zoom: 1;   
}   
.main-content {   
  float: left;   
  width: 100%;   
}   
.main {   
  height: 100px;   
  background-color: green;   
  margin-left: 110px;   
  margin-right: 110px;   
}   
.left {   
  float: left;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
  margin-left: -100%;   
}   
.rightright {   
  float: left;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
  margin-left: -100px;   
}

Holy Grailレイアウト

Holy Grailレイアウトは構造が単純で、メイン列を最初にロードできます。

実装原理:

(1) ラッピングボックスを追加し、padding-leftpadding-right の値を設定し、サブカラムの幅より大きいギャップ幅にします。

(2) メイン列とサブ列は float: left に設定され、左側のサブ列の margin-left は -100% に設定され、左に配置するには、position: left: -110px に設定されます。左側のサブカラム。右の列も同様です。 (3) メイン列の幅を100%に設定するだけです。宅配ボックスの幅を 100% に設定せず、調整してください。
CSSコードは次のとおりです

<div class="wrap">  
  <div class="main-content">  
    <div class="main"></div>  
  </div>  
  <div class="left"></div>  
  <div class="right"></div>  
</div>

HTMLコードは次のとおりです

.wrapper {   
  padding-left: 110px;   
  padding-right: 110px;   
  overflow: hidden;   
}   
.main {   
  float: left;   
  width: 100%;   
  height: 100px;   
  background-color: #ccc;   
}   
.left {   
  float: left;   
  width: 100px;   
  height: 100px;   
  margin-left: -100%;   
  position: relative;   
  left: -110px;   
  _left: 0;   
  background-color: orange;   
}   
.rightright {   
  float: left;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
  margin-left: -100px;   
  position: relative;   
  rightright: -110px;   
}