Question

对于桌面尺寸的响应式设计，我希望在与标题相同的垂直位置右侧浮动，但要位于我的第一段移动之下;像是这样的东西：

桌面

*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>

目前，我将我放在一个多列布局（ foundation 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>

我有什么选择？

感谢。

编辑：澄清一下，我正在使用媒体查询。问题是关于使用相同的HTML实现2种不同布局的css规则。

Answer 1

媒体查询和不同的显示属性可以实现这一点。属性包括：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＃aside表现为tbody。 div＃content现在表现为thead而div＃contentslast表现为tfoot。

HTML - 更改文档流中元素的顺序

1 个答案: