divs溢出

我一直有很多天的麻煩，並已問了幾個有關這些問題的相關問題。我的主要問題是如何阻止我的div溢出。我只是設法解決了一個問題，他們被包裝到不同的線上。divs溢出

這裏是一個片段：

#main-content { 
    padding: 0% 15% 0% 15%; 
    overflow: hidden; 
    height: 620px;  
    clear: both; 
    width: 70%; 
    border-style: solid; 
    border-color: #31679a; 
    border-width: 0px 0px 2px 0px; 
} 

#side-bar { 
    float: left; 
    max-width: 28%;  
    height: 99%; 
    padding: 1% 1% 0% 1%; 
    font-size: 14px; 
} 

#container { 
    float: left; 
    max-width: 68%; 
    height: 100%; 
    padding: 1% 1% 0% 1%; 
}

主要內容包括兩個側欄和容器，其並排而坐（與側邊欄的左邊）

您可以在主要內容區域看，容器以一定的寬度重疊側欄，而不是停在邊緣。這也會出現在標題中的圖像中，但不會顯示在小提琴中。

我將不勝感激任何幫助。

來源

2014-02-13 dweeman

您或者需要將box-sizing：border-box添加到您的容器和側邊欄（僅適用於較新的瀏覽器）或確保寬度+填充+邊距不超過100％ – Pete

作爲速戰速決，添加以下代碼到你的CSS會從包裝到一個新的生產線停止鏈接：

#sidebar a { 
    white-space: nowrap; 
}

但是你真正的問題是，你的側邊欄DIV不夠寬遏制其內容。

您還應該使用div代替表格進行佈局：請閱讀爲什麼here。

來源

2014-02-13 11:57:20

有趣，這肯定是有用的信息，我將不得不廢棄這些表格。我知道我的側邊欄不夠寬，但這是我的問題的一部分。我的網站整個中間部分的靜態寬度是否會變得更好，並將其設置爲適合大多數分辨率的最佳寬度，並將頁眉和頁腳保持爲100％並進行相應調整？ – dweeman

好吧，我忘了說明側欄和容器左側/右側的1％填充，並相應地調整了它們的寬度，這就解決了隱藏問題。但仍然在一定的寬度上，容器與側欄重疊。 – dweeman

主要的問題是，你的＃main-content div只有頁面寬度的70％，這反過來又限制了其中包含的兩個元素的寬度。嘗試將其改爲80％，這樣做會有所改變。使div更寬也給你更多的空間來添加填充。 –

回答

相關問題