響應式設計對象更改位置

-1

有時，在查看響應式網站時，我會看到兩個div，它們在全屏幕中彼此相鄰，但屏幕尺寸較小時一個在另一個之上。響應式設計對象更改位置

這是一個簡單的採用最大寬度=％，寬度= PX和浮動

然而有時一個其上以全屏模式下的RIGHT當它們堆疊在彼此的頂部上TOP出現在較小的顯示器上。

第一種行爲要求上是第一個在DOM 但第二個行爲，要求它成爲第二個在DOM 和HTML文件右邊的是所有的屏幕分辨率相同。

那麼這個效果如何實現呢？

來源

2013-12-21 Sam Coppock

「的第二個行爲要求它是DOM中的第二個行爲「 - [不，它不]]（http://jsfiddle.net/Fz57L/）。 –

好吧，我發現你的問題有點混亂，但是這是我理解的：

你想實現自適應網頁設計
你想邊欄上右鍵在桌面寬度
當您在手機/小屏幕上打開網站時，側邊欄或右側的內容應該位於頂部而不是底部。

如果我是正確的，那麼這是做到這一點的方式..

廣場右側上面的內容左側內容，並添加屬性float:right它..
將下面的左容器它..
應用媒體查詢..

演示使用引導：http://jsfiddle.net/YEUwN/95/

來源

2013-12-21 16:43:29

對於三個div，你可以使用這個CSS技巧。

#example {display: table; width: 100%; } 
#block-1 {display: table-footer-group; } 
#block-2 {display: table-row-group; } 
#block-3 {display: table-header-group; } 

<div id="example"> 
    <div id="block-1">First</div> 
    <div id="block-2">Second</div> 
    <div id="block-3">Third</div> 
</div>

http://jsfiddle.net/47T89/

那將顯示第三第二第一

如果你想了解更多，你會不得不等待它實際上是一個W3C工作草案 http://www.w3.org/TR/css3-grid-layout/

來源

2013-12-21 16:50:01 Heaven42

響應式設計對象更改位置

回答

相關問題