2012-08-16 83 views
1

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

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

wide screen

中等屏幕 綠化面積 medium screen

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

narrow screen

達到最小寬度

我用下面的風格

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

.green_block{ 
    min-width: 400px; 
} 

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

如何達到所需的行爲?

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

+0

您是否使用媒體查詢來更改不同視口寬度的樣式? – jackwanders 2012-08-16 12:50:09

+0

如果我找到你的話,網站啓用JavaScript,並有大量代碼做不同的事情,但我希望這種佈局在沒有任何JavaScript的情況下工作。 – 2012-08-16 12:55:22

+0

媒體查詢是CSS的一個功能:http://css-tricks.com/css-media-queries/ – jackwanders 2012-08-16 12:58:39

回答

2

看起來你需要屏幕大小特定的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; 
    } 
} 

等等。

+0

謝謝你的建議,我也會用它。但我希望這種行爲可以在沒有媒體查詢的情況下達成。 – 2012-08-16 12:58:34

+0

在我看來,這是唯一的解決方案。 – 2012-08-20 10:39:12