0

他の 3 つの div のコンテナーとして使用されている div があります。これらはすべて、 を使用して水平方向に並べられていfloat:leftます。同じ固定幅の 40pxを維持するには、leftとdiv が必要です。中央の div を動的に拡張したい - 可能であれば CSS のみを使用します。right

ここに私が実験しているJSFiddleがあります：http://jsfiddle.net/xJB9n/

CSS クラスの幅.middleを 620px に更新すると、これが私が探している結果ですmiddle。他の 2 つの div と水平方向に整列したまま、div が可能な限り拡張されます。

幅に関係なくcontainer、中央の div を常に残りの領域の 100% に拡大し、次のように設定します。

width: 100%;

トリックはしません。これを達成する方法を知っている人はいますか？

4

4 に答える 4

0

@Jeroen の css に加えて、もう 1 つ追加する必要があります。

html, body {
    height: 100%;
}

.middle {
    height: 100%;
    margin: 0 40px;
}  

.left {
    width: 40px;
    float: left;
}

.right {
    width: 40px;
    float: right;
}

私が追加したのは、実際にheightを 100% に設定することです。親要素の高さが 100% に設定されていないと、子要素に高さ 100% を適用できません。

デモについては、このフィドルを参照してください。

于 2013-06-18T20:08:01.910 に答える
0

あなたの構造から。2 つのオプション:

  1. display:table
  2. display:flex

display:tableIE8 を含むすべてのブラウザで正常に動作します。 Display:flexはまだ成長しており、まだ成熟しておらず、多くのブラウザで問題が発生しています。私はそれからのみhttp://jsfiddle.net/xJB9n/1/を提案しますdisplay:table;

誤解しない<table>でください。これは CSS だけであり、マークアップにはありません。

于 2013-06-18T19:59:10.753 に答える