將兩個盒子對齊，其中一個盒子的位置是：fixed;

我要對齊兩個箱子是這樣的：在（取決於瀏覽器的寬度）的範圍260-320px將兩個盒子對齊，其中一個盒子的位置是：fixed;

enter image description here

左面板的寬度移動，並且具有position: fixed，而另一個面板應該採取的瀏覽器的其餘部分。

我創建了一個小提琴這裏：http://jsfiddle.net/NTwUY/4/

的問題是，他們去了對方，旁邊其他的，而不是一個。我不想爲此使用JavaScript，因爲它的響應速度很快，所以我不能僅僅設置margin-left: 260px。

來源

2014-01-30 Deepsy

爲什麼他們中的一個具有絕對位置呢？ –

浮着位置??任何你需要兩者的理由？ – Nitesh

我的意思是固定的，不是絕對的，對於這個錯誤感到抱歉:( – Deepsy

這就是：http://jsfiddle.net/NTwUY/2/

你必須給fixed規則的#holder層：

#holder { 
    width: 100%; 
    position: fixed; 
} 

#panel { 
    float:left; 
    background-color: green; 
    min-width: 200px; 
    width: 20%; 
    max-width: 320px; 
} 

#content { 
}

來源

2014-01-30 12:38:18 Manolo

http://jsfiddle.net/NTwUY/4/嘗試在結果框中滾動我希望內容在面板旁邊，而不是在它下面 – Deepsy

不必修復第二層？ – Manolo

不僅僅是面板（左）應該有固定的位置，所以它總是會出現滾動的內容，內容面板會很長，不應該修復 – Deepsy

將兩個盒子對齊，其中一個盒子的位置是：fixed;

回答

相關問題