Question

在当前的项目中，我们希望在小屏幕上的标题上方导航，并且对于那些2个div，可以在平板电脑屏幕尺寸@media（min-width：20em）中直观地切换顺序。我记得能够通过一些狡猾的浮动和负边距来做到这一点，但我不记得我是怎么做到的。 *请注意，我对所有内容都进行了大小调整，并假设我已完全重置。 HERE is a fiddle

HTML

<nav>nav</nav>

<header>header</header>

CSS

nav, header {
  width: 100%;
  padding: 2em;
}

nav {
  float: left;
  background-color: #f06;
}

header {
  float: left;
  background-color: yellow;
}



@media (min-width: 20em) {

  nav {
    /* ? */
  }

  header {
    /* ? */ 
  }

} /* ===================== */

谢谢！ dw c / o nouveau

Answer 1

~~我建议你看看这个教程：http://css-tricks.com/resolution-specific-stylesheets/~~

我真的很尴尬地建议这个链接。适当的链接是css-tricks.com/snippets/css/a-guide-to-flexbox，这也是一个不错的weblog.bocoup.com/dive-into-flexbox，两者都在讨论flexbox。

Answer 2

您可以使用CSS3 flexbox来完成此操作，这可以在媒体查询可用的任何地方使用。

HTML：

<div id="container">
    <nav>nav</nav>
    <header>header</header>
</div>

CSS：

#container {
    width: 100%;

    display: -webkit-box;
    display: -moz-box;
    display: box;

    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
}

nav, header {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 2em;
}

nav {
    background-color: #f06;

    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;
}

header {
    background-color: yellow;

    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
}

@media (max-width: 20em) {
    nav {
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        box-ordinal-group: 2;
    }

    header {
        -webkit-box-ordinal-group: 1;
        -moz-box-ordinal-group: 1;
        box-ordinal-group: 1;
    }
}

重新排列2个div的视觉顺序，浮点数和负边距

2 个答案: