響應式設計 - 重新安排使用CSS

元素的位置，我想這樣做沒有JavaScript如果可能的話：響應式設計 - 重新安排使用CSS

我將有一個頁面上的2個以上的元素，我想改變頁面時有一定的順序尺寸。我正在使用媒體查詢，並將根據屏幕大小提供不同的CSS。 Div「a」應該在正常位置，但如果屏幕尺寸小於480px，那麼b應該直接在a上方。

<div id="a" class="myDivs">Top when on desktop</div> 
<div id="b" class="myDivs">Becomes top when under 480px wide screen</div>

，我必須保持我的mobile.css的CSS：

.myDivs { 
    width: 100%; 
}

所以沒有指定高度;因此，我不能簡單地定位絕對位置並設置保證金頂部或頂部。

來源

2013-03-01 jpsnow72

你在談論源代碼順序的獨立性。壞消息是，截至今天，你沒有得到超級糟糕的運氣（閱讀：用JS或類似的東西移動DOM）。好消息是，幫助正在以CSS Flexbox的形式出現 - 請查看該頁面上的「排序」。

其他資源：

https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_flexible_boxes

http://css-tricks.com/old-flexbox-and-new-flexbox/

來源

2013-03-01 15:59:35 chipcullen

的支持改善Flexbox的，順便說一句：HTTP：// caniuse。com /＃feat = flexbox – chipcullen 2013-03-01 16:00:28

感謝您的Flexbox信息。未來看起來相當不錯！ – jpsnow72 2013-03-01 16:19:49

CSS網格也在開發中，儘管它現在只支持IE10。退房http://24ways.org/2012/css3-grid-layout/ – chipcullen 2013-03-01 16:20:50

這一個可以做的伎倆反而會也許有缺點......

CSS：

.child-1,.child-2 { 
    width:100%; 
} 

.parent{position:relative;} 


@media screen and (max-width:480px){ 
    .child-1{ 
     position: absolute; 
     top: 100%; 
    } 
}

HTML：

<div class="parent"> 
    <div class="child-1">This is Child One</div> 
    <div class="child-2">This is Child Two</div> 
</div>

DEMO：http://jsfiddle.net/pavloschris/pYkfK/embedded/result/

來源

2013-03-01 16:21:42 xpy

這實際上相當出色 - 當屏幕較窄時，將下部元件定位在其容器元件的底部邊緣處。我無法弄清楚如何在頁眉中使用它，因爲降低的元素（在本例中爲'.child-1'）與頁面內容重疊（頁面內容應低於頁眉），這是由於降低了元素正在被排除在佈局流程之外。有沒有解決這個問題的方法？ – matty 2015-07-27 05:29:47

<div class="parent"> 
    <div class="child-1">This is Child One</div> 
    <div class="child-2">This is Child Two</div> 
</div>

隨着Flexbox的 - 在iPad iOS7測試，這將扭轉兩列。

@media screen and (max-width: 480px) 
{ 
    .parent 
    { 
     display: -webkit-flex; 
     display: flex; 
     -webkit-flex-direction: column-reverse; 
     flex-direction: column-reverse; 
    } 
}

我使用Modernizr的，所以我可以通過從我的HTML標籤的類去掉「Flexbox的」類地測試非Flexbox的支持。

.flexbox .parent 
{ 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: column-reverse; 
    flex-direction: column-reverse; 
}

注：我很新了flexbox而這些可能不是所有現在或在未來所需要的正確的前綴，但我已經在我的iPad上測試，這是最主要的目標，我爲此，它的作品非常漂亮。另請參見CSS Flexible Box Layout on iPad

來源

2014-05-16 20:33:44

<div class="parent"> 
    <div class="child-1">This is Child One</div> 
    <div class="child-2">This is Child Two</div> 
    <div class="child-3">This is Child Three</div> 
</div>

在CSS中使用表格佈局來重新排列div。

@media screen and (max-width: 768px) { 
    .parent { 
     display: table; 
    } 
    .child-3 { 
     display: table-header-group; 
    } 
    .child-1 { 
     display: table-footer-group; 
    } 
}

將在這個順序顯示的元素：兒童3，CHILD2，Child1

小提琴位置爲：http://jsfiddle.net/lockedown/gyef3vj7/1/

來源

2014-10-06 19:04:21 lockedown

響應式設計 - 重新安排使用CSS

回答

相關問題