防止浮動的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，以便在瀏覽器寬度太小時不顯示它。