自適應2列布局

Question

我正在使用自適應佈局的網站，這意味着網站適應用戶屏幕寬度。 有三個圖像說明我的想法，圖像顯示了從寬到窄的三個步驟。

寬屏幕 紫色區域粘貼到頁面的左側，綠色區域適合屏幕的其餘部分。

中等屏幕 綠化面積

窄屏幕 綠化面積下跳紫色區域

達到最小寬度

我用下面的風格

.purple_block { 
    float: left; 
    width: 751px; 
    height: 504px; 
    margin: 0 35px 100px 0; 
} 

.green_block{ 
    min-width: 400px; 
} 

但這種「最小寬度」是不行的，因爲綠色塊寬度從紫色區域一直到綠色區域的右邊緣的左邊緣計算。

如何達到所需的行爲？

UPDATE 紫色塊應該總是固定的（它實際上是一個項目庫）。 綠色塊應該有紫色塊的邊緣，看起來像一個適合所有剩餘空間的欄（這是一個項目描述：幾段文字+鏈接）。 當用戶縮小其瀏覽器綠色區塊時也變得更窄。當綠色塊達到其最小寬度時，它跳到紫色塊下方。

Answer 1

看起來你需要屏幕大小特定的CSS。您可以通過使用

@media only screen and (max-width: ...px) { ... } 

因此，對於每一個國家定義（您的個性化圖像顯示他們）定義應該在該瀏覽器窗口寬度改變CSS。

E.g.

@media only screen and (max-width: 1000px) { 
    .purple_block { 
     float: none; 
     width: 100%; 
     height: 504px; 
     margin: 0 35px 100px 0; 
    } 

    .green_block{ 
     width: 100%; 
     height: 300px; 
    } 
} 

等等。