CSS共通レイアウト配置(2)_html/css_WEB-ITnose

1-2-1 単一列可変幅レイアウト

サイド列の幅は 300px に固定され、コンテンツ列の幅は広くなり、サイズは 100%-300px です。中心的な問題は、浮動列の幅が「100% - 300px」に等しくなければならないことですが、CSS は明らかに、減算演算を使用したこの幅表現方法をサポートしていません。ただし、この幅はマージンによって柔軟に実現できます。実装の原則は、コンテンツの外側に div を配置することです。これは画像の contentWrap であり、その幅が 100% (コンテナの幅と等しくなります) になるようにします。次に、margin-left を -300px に設定することで、左に 300px 移動します。次に、コンテンツの margin-left を正の 300px に設定して、本来表現できない幅「100% - 300px」を実現します。このとき、コンテンツは contentWrap 内にあり、標準フローの形式で存在します。左マージンを 300px に設定すると、内部のコンテンツがレイアウトの外にはみ出さないようにすることができます。フローティング レイアウトを使用します。contentWrap は左側にフロートし、side は右側にフロートします。この方法の最大の利点は、各列の高さを考慮する必要がないことです。フッターの clear:both 属性を設定することで、重複が発生しないようにできます。

CSS コード:

#header, #footer, #container {    margin: 0 auto;    width: 85%;}#contentWrap {    margin-left: -300px;    float: left;    width: 100%;}#content {    margin-left: 300px;}#side {    float: right;    width: 300px;}#footer {    clear: both;}

1-3-1 単一列可変幅レイアウト
上記の方法と同様に、2 つの可変幅列の外側に div を配置するだけでよく、この div の幅は変数 。固定幅の列が隣にある単一列の固定「1-2-1」レイアウトを形成し、可変幅列に 2 つの可変幅列を比例して並べて実装するのが簡単です。上記の例の contentWrap コンテナーの場合、上記の「1-2-1」レイアウトのように、内部に div アクティブ列が 1 つだけある場合、このアクティブ列は標準的なフロー形式で配置され、その幅は自然に形成されます。表示効果は問題ありませんが、contentWrap コンテナ内にフローティングアクティブ列が 2 つある場合、幅をそれぞれ 40% と 60% など個別に設定する必要があります (丸め誤差を避けるため、59.9% が設定されています)ここ）。 contentWrap 列の幅はコンテナの幅と等しいことに注意することが重要です。そのため、ここでの 40% は、全体の幅の 40% から側面の幅を引いたものではなく、全体の幅の 40% です。それは明らかに私たちが望んでいることではありません。解決策は、コンテナ内に別の div を配置することです。つまり、元の contentWrap が 2 つの層 (outerWrap と innerWrap) になります。新しく追加したinnerWrapは標準フローモードで存在しており、左マージン200pxが設定されているため、幅は全体の幅から200pxを引いたものになります。 このように、innerWrap内のナビとコンテンツが基準となります。この新しい幅が幅のベースになります。

#header, #footer, #container {    margin: 0 auto;    width: 85%;}#outerWrap {    float: left;    width: 100%;    margin-left: -200px;}#innerWrap {    margin-left: 200px;}#navi {    float: left;    width: 40%;}#content {    float: right;    width: 59.5%;}#side {    float: right;    width: 200px;}#footer {    clear: both;}

列の両側の1-3-1固定幅レイアウト

両側の列は固定幅で、中央が広くなります。まず、左側と中央の列をグループとして、アクティブな列として、右側の列を固定列として考えます。次に、2 つの列を独立した列として扱い、左側の列を固定列として扱い、最後にコンテンツを可変幅列として保持します。この方法を使用する場合、アクティブな列ごとに追加の補助 div を追加する必要があります。ここでの考え方は、内側の層では、ナビを修正してコンテンツを広くするために、「innerWrap」 div を 2 つの外側に配置し、innerWrap でコンテンツを広くするために、contentWrap div を外側に配置するということです。 content. ;同様に、innerWrap を広くするために、outerWrap が追加され、構造が複雑になります。しかし原理は同じです。

CSS コード:

#header, #footer, #container {    margin: 0 auto;    width: 85%;}#side {    width: 200px;    float: right;}#outerWrap {    width: 100%;    float: left;    margin-left: -200px;}#innerWrap {    margin-left: 200px;}#navi {    width: 150px;    float: left;}#contentWrap {    width: 100%;    float: right;    margin-right: -150px;}#content {    margin-right: 150px;}#footer {    clear: both;}

OK。