css - 在包裹整个 div 之前，最好先包裹在子 div 中

Question

我有两个 div，它们在 wrapper-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 以下？

Answer 1

我想出的唯一解决方案是有一个固定大小的左栏（即左徽标 div）。如果它是固定的，右窗格可以有一个左边距来为其腾出空间并占据其余空间，并在必要时用它来换行文本。这样做的缺点是，如果窗口缩小太多，它不会跳到左侧浮动 div 下方，因为 nav 或 navcontent css 没有浮动。

示例可在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;
}