どのようにラップを絶対に配置しながらナビゲーションの幅を自動にするか

私のCSSはここにあります:

    

ここに私のHTMLがあります:

<div id="wrapper">
<div class="header"> 
   <div id="navWrapper">
   <div id="nav">
      
  <!-- end #nav --></div>
  <!-- end #navWrapper --></div>
    <!-- end .header --></div>
    <div class="clearfloat"></div>
    </div>

私はそのラッパーの底に座っているナビゲーションバーを作成しようとしています。私がこれを行うと考えることができる唯一の方法は、絶対配置を使用し、底を0に設定することです。しかし問題は、私のコードが現在反映しているラッパーの内部にdivの幅を設定する必要があることです。私は、幅が動的であり、ナビゲーションバーの幅がヘッダーイメージの一番下に合わせてラッパーの底に座っている間に変更したい。これどうやってするの?

0
私はすべてのコードを投稿しませんでした。そのすべてが今あります。もう一度お試しください。私は何かの下に落ちるものを持つことはできません。
追加された 著者 Michael Rader,
追加された 著者 FakeRainBrigand,

1 答え

#nav を100%幅に、4つの項目をそれぞれ25%幅に設定することができます。

フィドル

他に何かを意味する場合は、コメントを残してください。


ここに私が作った正確な変更があります。

#nav {
   width: 100%; /* Add: */ 
}

#nav li {
   width: 25%; /* Add: */ 
}

あなたが提供したというフィーリングに基づいて、navWrapperの左浮動が問題の原因です。それを削除すると左に浮かぶロゴが隠れます。これを修正するには、navWrapperの前とロゴイメージの後にclearfixを入れます。

更新されたフィドル

2
追加された
それはまったく動作しませんでした。私のコードを見て、幅を置くための適切な場所を教えてください。
追加された 著者 Michael Rader,
私はすでにそれをしました。これをコードに入れると、それが動作しないことがわかります。
追加された 著者 Michael Rader,
ああ、私があなたに与えたコードで動作していますが、私がフルサイトに置いたときは、まったく動作しません。
追加された 著者 Michael Rader,
あなたのコードだけを追加したときに何が起きているのかを見てください... jsfiddle。ネット/ 3fCEn/7
追加された 著者 Michael Rader,
ロゴはナビゲーションの上に座っています。私はこれを望んでいない。 navの左側にロゴが必要です
追加された 著者 Michael Rader,
いいえ、リンクを2つ追加すると、リンクが互いにスタックし始め、リンク名の長さを延長するとフォーマットが壊れます。フレキシブルにするにはナビゲーションバーが必要ですが、私はまだこれを取得していません。
追加された 著者 Michael Rader,
更新されたコードをアップデートされたフィドルに掲載しました。あなたが探しているものがわからない
追加された 著者 FakeRainBrigand,
@MichaelRader、更新を参照してください。
追加された 著者 FakeRainBrigand,
こちらはどうですか?私はFireBugの要素で要素を調べ、何が壊れているかを調べました。何とか width:600px; が失われました。私はそれを加えて、今はうまくいくようです。
追加された 著者 FakeRainBrigand,
追加された 著者 FakeRainBrigand,