1

このメニューをページの左側に配置しようとしています。

<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また、右に移動する必要があるすべてのメインコンテンツを含む秒もあります。これまでのところ、画面サイズに関係なく機能するように見える相対値を使用しています。

4

5 に答える 5

5

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>

ほとんどの場合、メイン コンテンツにも a を付けたいと思うpadding-leftので、メニューに密着しすぎないようにします。

ところで、メニューが左側ではなく右側に表示されるように上記を変更するのは簡単です。「左」という単語をすべて「右」に変更するだけです。

ああ、最後にもう 1 つ。メニューのコンテンツがメイン コンテンツよりも高い場合、奇妙なことを行うため、レンダリングが奇妙になりますfloat。その場合、bmatthews68 の例のように、フローティング ボディの下にあるボックスをクリアする必要があります。

/編集: くそー、プレビューが示したように HTML が機能しません。まあ、代わりに写真を含めました。

于 2008-09-14T08:29:26.413 に答える
3

そのようなものを配置するにはfloatプロパティを使用することになっていると思います。ここでそれについて読むことができます。

于 2008-09-14T06:04:48.710 に答える
2

フロートを（明示的な幅で）使用するというすべての答えは正しいです。しかし、元の質問に答えるために、 を配置する最良の方法は何<div>ですか? 場合によります。

CSS は文脈依存性が高く、ページの流れは HTML の構造に依存します。通常のフローは、要素とその子が、それらを含むブロック (通常は親) 内で上から下 (ブロック要素の場合) および左から右 (インライン要素の場合) にレイアウトされる方法です。これは、レイアウトの大部分がどのように機能するかです。width、margin、およびに依存して、padding周囲の他の要素に対する要素の間隔とレイアウトを定義する傾向があります (それら<div>が 、<ul>、<p>、またはそうでない場合でも、現時点では HTML はほとんどセマンティックです)。

floatまたはabsoluteまたはの配置などのスタイルを使用relativeすると、レイアウトの非常に具体的な目標を達成するのに役立ちますが、それらの使用方法を知ることが重要です。説明したように、floatは通常、ブロック要素を隣り合わせに配置するために使用され、複数列のレイアウトに非常に適しています。

ここでは詳しく説明しませんが、次の点を確認してください。

于 2008-09-14T16:19:01.027 に答える
0

目的の効果を得るには、float および clear の CSS 属性を使用する必要があります。

最初に、レイアウトの 2 つの列に対して呼び出された left と right のスタイルを定義し、ページ フローをリセットするために使用される clearer というスタイルを定義しました。

<style type="text/css">
。左 {
    フロート: 左;
    幅: 200px;
}
。右 {
    フロート: 右;
    幅: 800px;
}
。クリア {
    クリア: 両方;
    高さ: 1px;
}
</style>

次に、それらを使用してページをレイアウトします。

<div>
 <div class="left">
   <ul>
    <li>カテゴリ</li>
    <li>武器</li>
    <li>アーマー</li>
    <li>マニュアル</li>
    <li>栄養</li>
    <li>テスト</li>
  </ul>
 </div>
 <div class="right">
   何とか何とか何とか....
 </div>
</div>
<div class="クリア" />
于 2008-09-14T06:45:40.233 に答える
0

フロートを使用できます

<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>

cssファイルで

.left-menu{float:left;width:200px;}
于 2013-04-02T16:33:47.007 に答える