2 列のレイアウト_html/css_WEB-ITnose

1. 一般的な 2 列レイアウト

Baidu の検索結果ページなど、固定幅と適応高さの 2 列。

ブログパークの記事コンテンツページは上記と同様の構造になっています。

2番目、2カラムレイアウトの手順を実装します

1) 以下のようにフローティング

CSSを適用します

*{margin:0;padding:0;}#header,#footer{width:960px; height:40px; background-color:#f0f0f0; margin:0 auto;}#drapper{ width:960px;  margin:10px auto;} .mainBox{float:left; width:680px;  background-color:red;}.sidebar{float:right; width:270px;background-color:red;}

HTML構造は大体こんな感じです

<div id="header">header</div><div id="drapper"><div class="mainBox">下午在创新工场听赖晓宁的分享，他说到 O2O 这个领域，如果你只是做简单的线上引流到线下，是没有多少机会的，能赚个 1、2 年钱不错了。真正重要的，是完全拆解掉线下的利益链条，按你的逻辑重新组装起来，这样才有壁垒。</div><div class="sidebar">想革传统行业的命？你得先拆解开原有链条，再重构新格局</div><div style="clear:both;"></div></div><div id="footer">footer</div>

今のスタイル フローティング div はありませんset 高さについてですが、左側のフローティングdivの高さを50pxjに設定した後、コンテンツが高さを超えた場合はどうなりますか？

したがって、フローティング div の高さを固定しない、または高さを固定した後に overflow:hidden;

を追加するのが最善です

2) Height Adaptive

Height Adaptive は、高さを設定しないこと、または height:auto を意味します;

3 ) フローティングをクリアします

Baidu 検索またはブログ ガーデンのコンテンツ ページでは、フローティング div の後に追加の div タグを追加します。一般的に透明な浮きが扱えます。

誰かが言いました、フッターにclear:both;を追加することも可能ではないでしょうか？

よく見ると、まだ違いがあります。フッターには float が追加されているだけで、div コンテナーのドレーパーによって設定されたマージンは影響しません。

3. 1 つの列は固定幅で、もう 1 つの列はアダプティブです

アダプティブの場合は、% を使用して幅を制御する必要がありますが、サイドバー 200px、mainBox70% などです。ブラウザの表示領域が縮小すると、サイドバーが下部に押し込まれます。 width:auto または 100% をマイナスのマージンで使用するのが最善です。このとき、ウィンドウが縮小され、サイドバーのコンテンツと mainBox のコンテンツが重なる場合にも問題が発生します。現時点では、位置決めを使用してこの問題を解決できます。修正したCSSは以下の通りです

*{margin:0;padding:0;}#header,#footer{width:auto; height:40px; background-color:#f0f0f0; margin:0 auto;}#drapper{ width:auto;  margin:10px auto; position:relative;}.mainBox{float:left; width:auto; background-color:red; margin-right:275px;}.sidebar{float:right; width:270px;background-color:red; position:absolute;top:0px;right:0px;}

ビジュアルウィンドウ変更後の表示効果

4列と2列の幅適応

このレイアウト方法は、フローティングdivに特定の幅の比率を直接割り当てます、メインボックス 70%、サイドバー 28% など。ウィンドウが変更されると、2 つの列は常に比例して表示され、重なり合ったり、一方の側が「下に押し込まれる」ことはありません。