5

次のように、ラッパー div 内で左にフロートする 2 つの div があります。

HTML:

<div id="container">
    <div id="logo">LOGO</div>
    <div id="nav">Link1 Link2 Link3 Link4</div>
</div>​

CSS:

#container {  }
#logo { float: left; margin-right: 10px; }
#nav { float: left; }

JSFiddle: http://jsfiddle.net/vZWTc/277/

ウィンドウの幅を縮小すると、最初に #nav が #logo の下にジャンプし、次に内側にラップし始めます。(javascript ではなくレイアウトを使用して) 最初に #nav 内でしきい値 (幅 150px など) までラップし、その制限に達したときに #logo の下にジャンプできるようにする方法はありますか?

4

1 に答える 1

2

私が思いついた唯一の解決策は、固定サイズの左バー (左のロゴ div) を持つことです。固定されている場合は、右側のペインに左余白を設けてスペースを確保し、残りのスペースを占有し、必要に応じてテキストを折り返すことができます。これの欠点は、nav または navcontent css がフローティングされていないためにウィンドウが縮小しすぎると、左のフローティング div の下にジャンプしないことです。

例はhttp://jsfiddle.net/vZWTc/278/で入手でき、表示用のテキストが追加されていますが、ここで簡単に入手できます。

<div id="container">
    <div id="logo">LOGO</div>
    <div id="nav">
        <div id="navcontent">
            <p>Link1 Link2 Link3 Link4</p>
        </div>
    </div>
</div>​

#logo {
    float: left;
    margin-right: 10px;
}
#nav {
    display: block;
}
#navcontent {
    margin-left: 100px;
}
于 2012-11-04T21:20:45.983 に答える