CSS Div塊重新安排多個屏幕

所以我想要做的是設計一個頁面，有兩個側欄和一個主要文章區域。雖然平板電腦或手機使用時會縮小，但我希望兩個側邊欄移動，以便它們首先在主要區域的旁邊垂直堆疊，然後最終都會在其下方移動。我遇到的問題是我無法讓他們在這樣做的時候正確地重新排序。CSS Div塊重新安排多個屏幕

左側的三個部分（桌面/平板電腦/手機）是我想要的。右側的頁面顯示了它現在的樣子。基本上我需要5才能在4和3之間移動以便在平板電腦視圖中移動4/5，然後4移動到3以下以進行手機視圖。

我希望有道理嗎？如果它有幫助/重要，我正在使用Dreamweaver。謝謝！

Clicky to see what I mean!

來源

2012-08-06 user1578421

很難說沒有代碼它有什麼問題。你可以發佈一些代碼嗎？另外，你是否使用CSS媒體查詢？ – 2012-08-06 07:29:54

我剛剛使用Dreamweaver在選擇「流體網格佈局」時放出的內容。試圖發佈代碼，但它太長了 – user1578421 2012-08-06 07:37:33

這是可以做到如果一定的高度是已知的。

小提琴：http://jsfiddle.net/BramVanroy/Pt7sS/

的#contentWrap和#sideRight高度需要了解，使這項工作。如果這些不知道，你可以通過jQuery獲取高度。

html, body, #header1, #header2, #contentWrap { 
    width: 100% 
} 

#header1 { 
    background: red; 
    height: 50px 
} 

#header2 { 
    background: green; 
    height: 40px 
} 

#sideLeft, #main, #sideRight { 
    box-sizing: border-box; 
    float: left; 
    height: 200px 
} 

#sideLeft, #sideRight { 
    width: 20%; 
    background: #333 
} 

#main { 
    background: grey; 
    width: 60% 
} 

@media screen and (max-width: 768px) { 
    #main { 
     float: right; 
     width: 65% 
    } 

    #sideRight { 
     clear: left 
    } 

    #sideRight, #sideLeft { 
     width: 35%; 
     height: 100px 
    } 
} 

@media screen and (max-width: 480px) { 

    #sideLeft, #main, #sideRight { 
     float: none; 
     width: 100%; 
     position: absolute 
    } 

    #contentWrap { 
     position: relative; 
     height: 400px 
    } 

    #main { 
     top: 0 
    } 

    #sideLeft { 
     bottom: 100px 
    } 

    #sideRight { 
     bottom: 0 
    } 
}

來源

2012-08-06 07:38:10

https://docs.google.com/document/d/1fRDz0VfO5HjYmcRAvTjZyFwGtpub7UDi8EBjrLTW8N8/edit這是它發佈的代碼。 – user1578421 2012-08-06 07:43:13

而且？我給你修復它的代碼。我不打算實施它。我們不在這裏爲人們做工作，但我們在這裏提供建議和幫助。 – 2012-08-06 07:44:29

對不起，約瑟夫問我在上面的代碼。完全可以理解。我的HTML知識已經過時了，所以我不確定如何開始使用jQuery來實現它。我之前從未見過它，直到你提到它之後我才搜索它。 – user1578421 2012-08-06 07:49:15

CSS Div塊重新安排多個屏幕

回答

相關問題