3中間列內有1列的列布局+ RWD

Question

我有一個問題，試圖找出如何在CSS中完成此佈局。我可以在下面的示例中看到左側的浮動權利，但是我試圖在小屏幕尺寸的響應式網頁設計中解決這個問題，我在右側得到了結果。

也許它是一個有點漫長的一天，但我似乎無法得到如何做到這一點的想法。我的主要難題是從較小的屏幕尺寸將全屏幕中的右上角的紫色框變爲下框。

Answer 1

你有任何我們可以看的代碼嗎？ 你可以閱讀有關@media CSS屬性： http://mislav.uniqpath.com/2010/04/targeted-css/

這樣，您就可以根據屏幕尺寸自定義您的響應式設計。

這個解決方案應該可以解決你的問題，

http://jsfiddle.net/7nshG/1/

你應該給position:relative的容器，

position:absolute; 
bottom:0; 

孩子股利。

Answer 2

有很多方法。假設您不是從移動設備開始設計（並且您使用浮動來實現佈局），那麼請準確編寫佈局以符合您的桌面規格。

在移動斷點處，將每個元素設置爲100％寬度。淺藍色容器中的內容將把紫色框推下頁面。如果你用浮動編碼桌面佈局，你可能需要求助於清除，但我懷疑它。這裏有一個小提琴：

http://jsfiddle.net/bresson/7nshG/13/

.container { 
    max-width:300px 
} 
#blue { 
    border-color: blue; 
    border-style: solid; 
    border-width: 1px; 
    width:100%; 
} 
#blue p { 
    margin-bottom: 20px; 
} 
#lightBlue { 
    width:100%; 
    height: 50px; 
    border-color: lightBlue; 
    border-style: solid; 
    border-width: 1px; 
} 
#purple { 
    border-color: purple; 
    border-style: solid; 
    border-width: 1px; 
    height:100px; 
    width:100%; 
}