防止浮动的div包装到下一行

Question

这是我的网站，首先。

您会注意到，在页面中间的分隔栏下方，有三列，一列带有表单，一列带有文本，一列带有链接。

现在，将窗口调整为稍微小一些，右边的div将下拉到下一行。

反正有没有显示那个？ 因此， divs会调整（我有一个液体布局）直到他们不适合的点，然后，而不是将div包装到下一行，它只是不会显示？

Answer 1

您也可以只使用CSS实现。

只需将以下CSS属性分配给＃row4：

#row4 {
    min-width:1202px; /* the exact value depends on the sum of the width of your 3 column boxes */
    overflow:hidden;
}

这与您的预期解决方案略有不同，因为在调整窗口大小时右侧框将保持部分可见，并且不会立即完全消失。

请注意，最小宽度在IE6中不起作用。 但是，如果需要支持旧的IE，有几种方法可以模拟min-width属性：

Answer 2

您可以为它们提供一个包含最小宽度设置的包装div，并强制它使用水平滚动条（如果它太小）。 关于包装器div的好处是你可以给它一个最大宽度，并防止在超大型显示器上变得不稳定。

我不是水平滚动条的粉丝，但它完全删除了内容。

Answer 3

好的，这是你应该做的

在父div上包裹所有三个浮动分区，类似这样

<div id="parent">
    <div class="form">......</div>
    <div class="text">......</div>
    <div class="links">.....</div>
</div>

现在解决你的问题给parent div一个固定的高度就好了

#parent { height:400px;clear:both; }

Answer 4

您必须使用Javascript来获取视口的宽度，然后将包装的div的显示属性更改为display：none，以便在浏览器宽度太小时不显示它。