css響應式設計。 2列固定寬度。中間div動態寬度。在某些窗口寬度一列是在新行

這裏示例http://jsfiddle.net/oop4kdn6/33/css響應式設計。 2列固定寬度。中間div動態寬度。在某些窗口寬度一列是在新行

<div style="float:left;" id="leftsidebar1" >Left sidebar</div> 
<div style="float:left;" id="maincontent1" >Main content</div>  
<div style="float:left;" id="rightsidebar1">Right sidebar</div>

和CSS我測試，並且其中看到問題

@media screen and (min-width: 641px) and (max-width: 900px) { 
#maincontent1{ min-width: 241px; max-width: 500px } 
#leftsidebar1, #rightsidebar1{width:200px;}  
}

大二如果窗口寬度至少爲641像素且不超過900像素，則兩個側邊欄的寬度爲200像素。和中間列的寬度（div #maincontent1）我預計實際窗口寬度減去400px（200 x 2）。

問題是如果窗口寬度從641px到658px，則#rightsidebar1位於新行。如果超過658px，那麼所有的div都在一行中。

據我所知，爲了避免這個問題，我必須爲＃maincontent1設置較少的min-width。但不明白爲什麼。例如，如果窗口寬度650px。它必須足以在一行中顯示所有列。因爲200 + 200 + 241 = 641。

#rightsidebar1爲什麼在新行？

來源

2015-06-08 user2118559

試試這個

@media screen and (min-width: 641px) and (max-width: 900px) 
{ 

    * 
    {  
     margin:0px; 
    } 
    #maincontent1{ min-width: 241px; max-width: 500px } 
    #leftsidebar1, #rightsidebar1{width:200px;}  
}

默認頁都有一定的餘量。它很好的做法，始終使用

*{margin:0px}

刪除默認保證金

來源

2015-06-08 20:03:32

謝謝！如果寬度爲641像素或642像素，則右側欄位於新行。據瞭解，這是因爲容器div與邊界1px（來自兩邊的1px）一致。似乎現在的問題很明顯。 http://jsfiddle.net/oop4kdn6/39/ – user2118559

在一列中再次用較長的文本進行測試http://jsfiddle.net/oop4kdn6/43/和右邊欄在新行中。窗口寬度：729，maincontent1寬度：500和每個側邊欄200.爲了避免右邊欄在新行中必須設置固定maincontent1寬度http://jsfiddle.net/oop4kdn6/44/。還是其他解決方案目前我的結論是，用css @media屏幕出現太多問題。似乎更好地使用jQuery？ – user2118559

我不明白你的問題....在窗口大小729px兩側邊200px所以寬度左爲maincontent1 div是729px-400px = 329px，所以如果內容大於329px而小於500px（maincontent1的最大寬度股市）然後右邊欄肯定會下降...........和CSS媒體查詢是非常容易的，沒有問題，一旦你明白了 –

css響應式設計。 2列固定寬度。中間div動態寬度。在某些窗口寬度一列是在新行

回答

相關問題