浮動div保持滑動下方其他浮動div

我的網站包含一個側面菜單div和主要內容div。我已經將剩餘的div浮動並使用百分比，以便列填充整個頁面。不過，我也使用最小寬度，因爲我希望側邊菜單不小於205像素寬，主要內容不小於780像素。該網站的寬度不得小於985像素，但我仍然希望內容具有足夠的靈活性以填充屏幕。浮動div保持滑動下方其他浮動div

我的問題是當我調整窗口的大小（寬度小於985px）主內容div移動到側面菜單下。我在哪裏出錯了？，div應該保持在側面菜單旁邊的相同位置，但水平滾動條應該啓動。內容應該填滿屏幕。

Fiddle

的HTML：

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Untitled Page</title> 
    <link rel="stylesheet" type="text/css" href="test.css" /> 
</head> 
<body> 

<div id="wrapper"> 

    <div id="side-bar"> 
     <p>side bar</p> 
    </div> 

    <div id="main-content"> 

     <div id="content"> 
      <p>some content</p> 
     </div>  

    </div> 

</div> 


</body> 
</html>

的CSS：

body 
{ 
margin:0; 
padding:0; 
font-size:100%; 
font-family:Arial; 
} 

p 
{ 
margin:0; 
padding:0; 
} 

#wrapper 
{ 
width:100%; 
min-width:985px; /*site no smaller than 985px wide*/ 
height:auto; 
} 

#side-bar 
{ 
width:15%; 
min-width:205px; /*nav sidebar no smaller than 205px wide*/ 
min-height:672px; 
background-color:Gray; 
float:left; 
} 

#main-content 
{ 
width:85%; 
min-width:780px; 
min-height:672px; 
background-color:Maroon; 
float:left; 
} 

#content 
{ 
width:740px; 
height:500px; 
background-color:#ccc; 
margin:0 auto; 
}

來源

2013-12-09 user2982873

有人張貼了答案，但由於某種原因，它現在消失了，所以我不能拿出功勞來解決這個問題。

我創建了一個最小寬度爲985px的包裝。然後，我分別使用百分比值作爲側邊和主要內容區域的百分之十五。但是我沒有考慮到它的985px包裝的15％和85％。

我的側欄寬度爲15％，最小寬度爲205像素，但985像素的15％僅爲147.25像素，因此額外像素強制側欄下方的主內容div。

希望有道理嗎？感謝您幫助我:)

來源

2013-12-11 12:11:14 user2982873

的原因，你的主要內容DIV進入菜單的div下面是由於這樣的盒子模型作品。如果您將主內容div更改爲內聯塊，則它將保留在菜單的右側。這裏有一個jsfiddle向你展示如何做到這一點。

#main-content 
{ 
    display:inline-block 
    width:85%; 
    min-width:780px; 
    min-height:672px; 
    background-color:Maroon; 
    float:left; 
}

來源

2013-12-09 15:59:26 evasilchenko

嗨，謝謝你回到我身邊，不幸的是沒有任何建議工作。只要你開始瀏覽器窗口閃爍，主內容div仍然移動到側邊欄下 – user2982873

@ user2982873這很奇怪，jsfiddle在Chrome和Firefox中對我很好。你有沒有嘗試點擊jsfiddle查看結果或只是嘗試粘貼的CSS？ – evasilchenko

如果有足夠的水平空間，塊漂浮在同一側，只留下彼此相鄰。

如果我真的想要一個水平滾動條，我會嘗試table layout（display：table-row，display：table-cell）。

來源

2013-12-09 15:59:54

創建的主要內容股利後一個div，並給它一個類「clearfix」和下面的風格：

.clearfix{ 
     clear:both; 
    }

我認爲這個問題可能是你不清除浮動，這是爲什麼你的容器div（包裝）搞亂了。

來源

2013-12-09 16:00:52 user3034378

浮動div保持滑動下方其他浮動div

回答

相關問題