1

この html ヘッダーのメインdiv (紫)があり、ロゴ(赤)と右側のその他の情報(緑)を含む 2 つの他の div に分割されます。

の両方をうまくフロートさせるの明確な修正があり、両方とも左にフロートされます。

ここでの問題は、緑を幅全体に合わせる方法を見つけるのに苦労していることです

この場合、自体は幅が固定されており、199pxの幅宣言はありません

外側の紫色のdiv にも固定幅はありません。現時点では、流動的なレイアウトを持つ の65%です。body

だから私の質問は、cssでの終わりまで緑を拡大する方法ですか? div div

width:86%にを適用しようとしましたが、には固定値があるため機能しませんでした...

問題を解決できるテーブル表示モードなどがあるのではないかと思いdisplay:table-cell/table-rowましたが、どれも思い通りに動作しないようでした。

あなたがそれについて私を助けることができれば、それは素晴らしいことです:)

4

3 に答える 3

2

これはきれいではないかもしれませんが、うまくいくはずです。

  1. 絶対に赤いdivを0,0に配置します
  2. 紫色のdivに199pxの左側のパディングを追加します
  3. 赤と緑の両方のdivからフロートを削除します
于 2011-03-11T17:34:50.337 に答える
0

float: left赤いdivでを使用するだけでうまくいきます。

http://jsfiddle.net/Jk5BE/2/

于 2011-03-11T17:39:38.733 に答える
0

これは、このタイプの問題に対する私のお気に入りの解決策です。ボーナスは、ラッパーを使用せず、他の列を追加できることです(ただし、この場合、ヘッダーのように見えるため、ラップが必要になります)。

http://www.alistapart.com/d/holygrail/example_4.html

単純なフロートを使用するだけでも、非常に簡単に行うことができます。

http://jsfiddle.net/W3DEC/

于 2011-03-11T17:39:52.740 に答える