1

私は2つの部門を持っています。どちらにも可変サイズのコンテンツを含めることができます。

1 つは左にフロートする必要があり、もう 1 つは右にフロートする必要があります。というか、一方が親の左側を抱きしめ、もう一方が右側を抱きしめる必要があります (誰かが浮いていない解決策を持っている場合)。しかし、それらが重なっている場合（つまり、ブラウザがサイズに縮小されて、フロートされた左の div がフロートされた右の div と接触するようになった場合）、それらをクリアするか、あたかもそれらが重なり合っているかのように積み重ねてください。両方とも、分裂するのに十分なスペースがないまま左に浮いていました。

これは可能ですか？

いくつかの HTML:

<div id="header">
    <div id="header-title">
        <h1>
            Title (variable length)
        </h1>
    </div>
    <div id="header-menu">
        <h2>
            Menu1 Menu2 Menu3 Menu4 Menu5 Menu6 Menu7 (variable length)
        </h2>
    </div>
</div>

いくつかの CSS:

#header{

    overflow:auto;

}

#header-title{

    float:left;

}

#header-menu{

    float:right;

}

望ましい動作はレスポンシブ Web デザインの領域にあることに言及する価値がありますが、@mediaクエリなしでこのように動作することを望んでいます。メタviewportタグは最終的に使用されますが、現時点では、デスクトップ設定で正しく応答することだけを望んでいます。

幸運を...

4

1 に答える 1

0

これはあなたが意味したものですか？

http://jsfiddle.net/K8fnc/3/

#header{

overflow:auto;

}

#header-title{

    float: left;
}

2 番目の div で float: を削除すると、機能します。

于 2013-07-23T09:01:05.530 に答える