保持盒裝佈局中固定元件的位置，響應式設計

Question

第一次在這裏提問。

我有一個盒裝佈局（最大寬度1014px）由2列組成。

右欄有400px的寬度和卷軸。

左列需要固定到左上（未滾動）左欄的，佔據「盒子」的剩餘的可用寬度，並在更大的屏幕尺寸保持「箱」內。

在屏幕尺寸小於1024像素的情況下，只有左欄應以流體樣式犧牲寬度，而右欄保持寬度。

有什麼建議嗎？

Answer 1

這會做你想要的。

基本上，固定左DIV與流體的佈局，但在1,024像素x具有一個斷點，輪流它變成真實經由左餘量劈爲中心的固定寬度的固定格。

<div class="box"> 
    <div class="left-col"> 
     left 
    </div> 
    <div class="right-col"> 
     right 
    </div> 
</div> 
<style> 
body { 
    margin: 0; 
} 
.box { 
    position: relative; 
    max-width: 1024px; 
    margin: 0 auto; 
} 
.right-col { 
    position: absolute; 
    right: 0px; 
    width: 400px; 
} 
.left-col { 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    right: 400px; 
} 
@media screen and (min-width: 1024px) { 
    .left-col { 
     width: 624px; 
     left: -512px; 
     right: initial; 
     margin-left: 50%; 
    } 
} 
</style>