HTML - 更改文檔流程中元素的順序

對於桌面大小的響應式設計，我希望在垂直位置作爲標題在右側浮動，但要放在我的第一段移動設備下方;是這樣的：HTML - 更改文檔流程中元素的順序

桌面

*Header*  | --aside-- | 
<P>1, Lorum | Also Lorum | 
Ipsum Dolar</p>| Ipsum, etc.| 
<P>2, Sit amet,|____________| 
blah, blah, blah, blah.</p>

移動

*Header* 
<P>1, Lorum 
Ipsum Dolar.</p> 
| --aside-- | 
| Also Lorum | 
| Ipsum, etc.| 
|____________| 
<P>2, Sit amet, 
blah, blah, 
blah, blah.</p>

目前，我有我的一邊爲多列布局的列（基礎5），它的工作原理適用於移動設備佈局，但在臺式機上我的第二段落在旁邊一排，因此段落1之間有很多空白第二條第2款

我想是我的文件在桌面顯示，好像它是：

<aside style="float:right;">blah blah.</aside> 
<h2>blah</h2> 
<p>blah, blah.</p> 
<p>blah, blah.</p> 
<p>blah, blah.</p>

，並顯示在手機類，好像它是：

<h2>blah</h2> 
<p>blah, blah.</p> 
<aside>blah blah.</aside> 
<p>blah, blah.</p> 
<p>blah, blah.</p>

是什麼我的選擇？

謝謝。

編輯：澄清，我正在使用媒體查詢。問題是關於用什麼css規則來用相同的HTML實現2種不同的佈局。

來源

2014-03-27 nHaskins

閱讀Ethan Marcotte的[Responsive Web Design]（http://alistapart.com/article/responsive-web-design/），然後嘗試在不同的斷點處實現媒體查詢。 – TylerH

如果'h2'和第一個'p'具有已知的'height'，則可以使用'pseudo-element'，'float'和'clear'在其下方放置'aside'，否則使用display：flex和order '。 @nHaskins讓我們成爲一個小提琴來得到榜樣，thk for you –

@GCyrillus，display：flex;訂單看起來像「正確」的解決方案，但瀏覽器支持似乎還沒有。儘管如此，我還是需要爲未來的項目閱讀這篇文章。 – nHaskins

這可能與媒體查詢和不同的顯示屬性。屬性爲：table-footer-group，table-row-group和table-header-group（w3schools display）。這些屬性是來自html的tfoot，tbody和thead的CSS等同物。通過這些屬性，您可以更改某些項目的顯示順序。檢查jsfiddle以檢查它是如何工作的。

這是什麼樣子：

<div id="container"> 
    <div id="aside"> 
     <aside style="float:right;">This is outside</aside> 
    </div> 
    <div id="content"> 
     <h2>blah</h2> 
     <p>blah, blah.</p> 
    </div> 
    <div id="contentlast"> 
     <p>blah, blah.</p> 
     <p>blah, blah.</p> 
    </div> 
</div>

而CSS：

@media screen and (max-width:500px){ 
    #aside { 
     display:table-row-group; 
    } 
    #content { 
     display:table-header-group; 
    } 
    #contentlast { 
     display:table-footer-group; 
    } 
}

顯示錶行集團在div＃拋開表現爲TBODY。 div＃內容現在表現爲一個thead和div＃contentlast行爲像tfoot。

來源

2014-03-27 20:11:35 ArjanSchouten

這是我在找的概念。我會嘗試一下，看看它對我的作用。 – nHaskins

HTML - 更改文檔流程中元素的順序

回答

相關問題