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

Question

首先是我的网站。

你会注意到在页面中间的分隔栏下方有三列，一列有表格，一列有文字，一列有链接。

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

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

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属性：

http://www.thecssninja.com/xhtml/ie6-min-width-solutions

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，以便在浏览器宽度太小时不会显示它。