Question

我有两个div在左边的包装器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之下，因为导航或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;
}

在包装整个div之前，首选包装在sub-div中

1 个答案: