防止浮动的div换行到下一行

Question

这是我的网站，首先。

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

现在，将窗口大小调整为稍小，右侧的div将下移至下一行。

有没有办法只是不显示它？所以，div将调整（我有一个流动布局）直到它们不适合，然后，而不是将div包装到下一行，它就不会被显示？

- user433143

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中，min-width无法使用。但是，如果您需要支持旧版IE，则有几种方法可以模拟min-width属性：

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

- jfs

Answer 2

好的，这是你应该做的：

将所有三个浮动的 <div> 包裹在一个父级 <div> 中，像这样：

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

现在为了解决您的问题，请给父级 div 设定一个固定高度，例如：

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

- Starx

Answer 3

你可以给它们一个包装器div，设置一个最小宽度，并在它变得太小时强制使用水平滚动条。包装器div的好处是你还可以给它一个最大宽度，防止在超大显示器上出现问题。

我不喜欢水平滚动条，但这比完全删除内容要好。

- Syntax Error

Answer 4

你需要使用JavaScript来获取视口的宽度，然后更改包装div的display属性为display:none，这样当浏览器宽度太小时，它就不会显示出来。

- Brent Friar