Divタグとアライメントの問題

Question

Divタグで次のような状況が発生しました。私はページ、ヘッダ、ボディ、フッタの3つのセクションを持っています。私の問題はメイン（ボディ）セクションです。そのセクションの中で、2つのdivタグを追加して、ボディセクションの左右の領域を作成しました。私は左にLeftColを浮かべました。しかし、rightColは左より長いので、rightcolのテキストはleftCol divの下に戻ります。私はそれを望んでいません。私は基本的にそのボディセクションで作成された2つのcolsを必要とします。ここでは私が下でやっていることの基本的なdiv構造があります。

<div class="header"> 
</div> 
<div class="main"> 
    <div class="leftCol"></div> 
    <div class="rightCol"></div> 
</div> 
<div class="footer"> 
</div> 

メインタグ内にdivタグを含む2つの列を作成するにはどうすればよいですか？

Answer 1

両方の列の幅が「メイン」コンテナの幅を超えている可能性があります。詰め込みはそれぞれの幅の合計に含まれています。また、両方の列に次のフロートを設定します。

float：left;

Answer 2

ステップ1：div宣言を削除します。
ステップ2：テーブルを使用します。
ステップ3：リラックスするだけで動作することがわかります。

状況によっては、テーブルとdivの組み合わせを使用する傾向があります。私は2列のレイアウトを持っている必要があり、私はブラウザの互換性だけでなく、さまざまな画面の解像度がレイアウトとジャックしないようにしたい：私はテーブルを使用します。

幅が利用できないために次の行に落ちる場合は、divを使用します。

説明したことは、使用した言葉遣いでさえ、まさに表のためです。テーブルには列があります。浮遊物はしません。

Answer 3

左の両方の列を浮動小数点にします。これにより、両方の列が左から右の順にドキュメントの順に表示されます。

Answer 4

右の列も左に浮かべてください。浮動要素に幅を指定してください。

これを自分で簡単にしたい場合は、青写真や他のCSSレイアウトフレームワークの使用を検討してください。

Answer 5

私は多分少し遅れて、この問題についてだが、あなたはdivタグを持つテーブルの振る舞いをしたい場合は、次のように行うことができます。

<div class="header"> 
</div> 
<div class="main" style="display:table-row"> 
    <div class="leftCol" style="display:table-cell"></div> 
    <div class="rightCol" style="display:table-cell"></div> 
</div> 
<div class="footer"> 
</div>