私は、このメニューを配置しようとしています：ページの左側にcssでdivを配置する最適な方法は何ですか？
<div class="left-menu" style="left: 123px; top: 355px">
<ul>
<li> Categories </li>
<li> Weapons </li>
<li> Armor </li>
<li> Manuals </li>
<li> Sustenance </li>
<li> Test </li>
</ul>
</div>
を。問題は、絶対値または固定値を使用する場合です。
画面サイズが異なると、ナビゲーションバーの表示方法が異なります。私はまた、右に移動する必要があるすべての主要なコンテンツを含む第二のdivを持って、これまで私は画面のサイズに関係なく動作するように見える相対的な値を使用しています。
floatは実際にこれを達成するための正しいプロパティです。しかし、bmatthews68によって与えられた例を改善することができます。フローティングボックスの最も重要な点は、はの明示的な幅を指定する必要があることです。これはむしろ不便かもしれませんが、これがCSSの仕組みです。しかし、pxは、HTML/CSSの世界では、少なくとも幅を指定しない場所を持たない測定単位です。
異なるフォントサイズで使用できる数値には、常にemまたは%のいずれかを使用してください。今、メニューが浮動体として実装されている場合、これはメインのコンテンツがその周りに浮動することを意味します。主な内容は、メニューよりも高い場合、これはあなたが望むものではないかもしれません。
float1 http://page.mi.fu-berlin.de/krudolph/stuff/float1.png
<div style="width: 10em; float: left;">Left</div>
<div>Right, spanning<br/> multiple lines</div>
あなたがメインのコンテンツ]メニューの幅に等しいmargin-leftを与えることによって、この動作を修正することができます：
float2 http://page.mi.fu-berlin.de/krudolph/stuff/float2.png
<div style="width: 10em; float: left;">Left</div>
<div style="margin-left: 10em;">Right, spanning<br/> multiple lines</div>
は、ほとんどの場合、あなたはまた、メインのコンテンツを提供したいpadding-leftメニューに「密着」しすぎないようにしてください。
ちなみに、メニューが左ではなく右になるように上記を変更するのは簡単です。単語「左」から「右」に変更するだけです。
ああ、最後のものです。 floatが奇妙なことをするので、メニューのコンテンツがメインコンテンツよりも高い場合、それは奇妙に表示されます。その場合、bmatthews68の例のように、浮動体の下にあるボックスをクリアする必要があります。
/EDIT：HTMLは予期したとおりに表示されません。さて、私は代わりに絵を入れました。
floatのようなものを配置するには、floatを使用すると思われます。 You can read about it here.
目的の効果を得るには、floatとclear CSS属性を使用する必要があります。
最初に、レイアウト内の2つの列の左と右のコールにスタイルを定義し、ページフローをリセットするために使用されるclearerというスタイルを定義しました。
<style type="text/css">
.left {
float: left;
width: 200px;
}
.right {
float: right;
width: 800px;
}
.clear {
clear: both;
height: 1px;
}
</style>
次に、ページをレイアウトするために使用します。
<div>
<div class="left">
<ul>
<li>Categories</li>
<li>Weapons</li>
<li>Armor</li>
<li>Manuals</li>
<li>Sustenance</li>
<li>Test</li>
</ul>
</div>
<div class="right">
Blah Blah Blah....
</div>
</div>
<div class="clear" />
浮動小数点数（明示的な幅）を使用するとの回答はすべて正しいです。しかし、元の質問に答えるには、<div>を配置する最良の方法は何ですか？場合によります。
CSSのコンテキストは非常に高く、ページのフローはHTMLの構造に依存します。通常のフローとは、要素とその子要素が、その包含ブロック（通常は親要素）内の上から下へ（ブロック要素の場合）、左から右（インライン要素の場合）にレイアウトされる方法です。これはレイアウトの大部分がどのように機能するかです。 width、margin、およびpaddingを使用して、要素の周囲の他の要素との間隔やレイアウトを定義する傾向があります（<div>,、<p>など）。
floatまたはabsoluteまたはrelativeのようなスタイルを使用すると、レイアウトの目的を達成するのに役立ちますが、その使い方を知ることが重要です。説明したように、ブロック要素を互いに隣り合わせに配置するには、一般にfloatが使用されます。これは、複数列のレイアウトには本当に適しています。
私はここで、より詳細には触れませんが、以下をチェックアウトする場合があります：
<div class="left-menu">
<ul>
<li> Categories </li>
<li> Weapons </li>
<li> Armor </li>
<li> Manuals </li>
<li> Sustenance </li>
<li> Test </li>
</ul>
</div>
を使用することができます
.left-menu{float:left;width:200px;}
あなたの '明確' はdivのクラスは、あなたのCSSで使用される '.clear' セレクタと一致していません。 –
ありがとうBobby。私は投稿する前にそれを二重にチェックしておくべきです。 –