如何阻止div在頁面調整大小崩潰？

HTML：如何阻止div在頁面調整大小崩潰？

<div id="wrapper"> 

    <div id="tabs"> 
    </div> <!-- tabs close !--> 


    <div id="verticalStack"> 

     <div id="accordion"> 
     </div> <!-- accordion close !--> 


     <div id="usersBox"> 
     </div><!-- usersBox close !--> 

     <div id="displayProductButtons"> 
     </div> <!-- displayProductButtons close !--> 

    </div> <!-- verticalStack !--> 


</div> <!-- wrapper close !-->

CSS：

body { 
    margin:0; 
    padding:0; 
    font-family: Verdana, Times, serif; 
    font-size: 12px; 
    color: #333333; 
    background-color: #F9F9F9; 
    min-width: 944px; 
} 

#wrapper{ 
    margin:10px; 
    width:90%; 
} 


#tabs { 
    float:left; 
    width:700px; 
    margin-right: 10px; 
} 

#verticalStack{ 
    float:left; 
    width:400px; 
    height:500px; 
} 

#accordion{ 
    float:left; 
} 

#usersBox{ 
    width:100%; 
    margin-top:10px; 
    float:left; 
    border:1px solid #aaa; 
    border-radius:5px; 
} 

#display{ 
    margin-top:25px; 
    float:left; 
}

的頁面看起來是這樣的：

------------------------------------ 
| wrapper       | 
    ----- ------------------ 
| |tabs| |verticalStack |  | 
    ----- ------------------- 
|   | |accordion | |  | 
      -------------   
|   | |usersBox | |  | 
      -------------   
|   | |display  | |  | 
      -------------- 
|   |     |  | 
      ----------------   
|-------------------------------------

當我調整頁面大小的veritcalStack DIV（與內部的div一起）落在下標籤div。有人可以向我解釋爲什麼會發生這種情況，以及我能做些什麼，謝謝。

更新1：新增包裝div來結構圖

來源

2013-01-10 greenpool

你的浮動元素;只要水平空間足以提供它們，它們就會保持並排。如果你不想讓它們崩潰，你應該把它們放在一個寬度明確的容器中;這將在您調整大小的某個時刻創建一個水平滾動條。

<!-- these images will not collapse --> 
<div id="container"> 
    <img src="http://placekitten.com/300/200" /> 
    <img src="http://placekitten.com/200/200" /> 
</div> 

<!-- these images will collapse --> 
<img src="http://placekitten.com/300/200" /> 
<img src="http://placekitten.com/200/200" />

工作小提琴：http://jsfiddle.net/jonathansampson/EChrr/

我的建議是接受這一點;檢查出Responsive Web Design，並找到如何使用瀏覽器的自然行爲，以利於您。

來源

2013-01-10 02:50:36 Sampson

嗨，謝謝你的回覆（我會檢查出這本書）。然而，我確實有一個'wrapper' div，它作爲一個容器，但仍然失敗。 – greenpool

@greenpool你需要在你的包裝器上設置'width'或'min-width'。它應該與浮動元素的集體寬度一樣大或更大。 – Sampson

謝謝隊友。我想我明白了！ – greenpool

浮動元素將保持並排直到沒有足夠的空間（即在瀏覽器窗口小於1110px寬的情況下）。如果這是設計必須如何，那麼你應該在#wrapper上設置一個寬度或最小寬度到1110px寬。

您也可以嘗試設置浮動元素相對於其他元素的寬度（即使用百分比），以便設計在較小的分辨率下工作。

來源

2013-01-10 02:58:44 bradleykirwan

如何阻止div在頁面調整大小崩潰？

回答

相關問題