には、どうするのがベストな位置部css?

StackOverflow https://stackoverflow.com/questions/61155

  •  09-06-2019
  •  | 
  •  

質問

ようにしている場所でこのメニュー：

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

左側に表示されます。の問題であることを利用した場合、絶対値または固定値で変更できません。
異なる画面サイズで描画するナビゲーションバーとは異なります。また第二本部長を含むすべてのコンテンツについて通知がありましたので移動は、これまで私が使っている相対的な価値あるうな画面サイズです。

役に立ちましたか？

解決

float その右の物件です。しかし、例によるbmatthews68を良くすることができます。最も重要な点として浮かぶ箱のこと 必要 指定し明示的な幅になります。このときは不便ですが、CSSのです。しかし、通知する px ユニットの測定のない場所の世界でHTML/CSS、少なくともしないを指定し幅.

常にリゾートへの対策としての異なるフォントサイズ、つまりのいずれかを使用 em または %.また、このメニューを実施し、浮体、その主なコンテンツ山"周辺"です。場合の主な内容は以下のメニューをこなしたい:

float1http://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 と同じ幅のメニュー：

float2http://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 いoddいます。その場合、またはボックスが下記の浮体としてbmatthews68の例です。

/編集:気、HTMLな方にプレビューを示します。でも、私を含写真です。

他のヒント

んに使用すればいいのに float 性のための位置決め物をするようです。 みなさんです。

すべての回答と利用のfloat(明示的な幅)してください。が答えによらの問題は、どうするのがベストな配置 <div>?それはその時々です。

CSSの高い文脈の流れのページは依存構造に関するおHTML.通常の流れはどのよう要素とその子どもたちが、レイアウトの上(ブロックの要素と、左右（インライン要素）を含有ブロック(通常は、親会社).これはどのように多数のレイアウト。する傾向があるな width, margin, は、 padding を定義する間隔およびレイアウトの要素が他の元素の周りできな <div>, <ul>, <p>, 場合、又は、HTMLでは意味がこめています。

利用スタイルのように float または absolute または relative 位置決めを達成できるよう支援いたします非常に具体的な目標のレイアウトですが、その使い方を知りました。て説明し float 一般的に用いられているブロック要素には、本当に良いのためのマルチカラムのレイアウトを行っております。

いく詳しく知りたい方はこちらできるために、以下を確認して下さい:

を利用して発見されたfloatおよび明確にCSS属性を取得します。

初めて定義したスタイルをと呼ばれる左右のカラムは私のレイアウトされているのがより明確に戻るページのフローです。

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

利用できる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>

cssファイル

.left-menu{float:left;width:200px;}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top