1

在当前项目中，我们希望在小屏幕上的标题上方导航，并让这 2 个 div 在平板电脑屏幕尺寸 @media (min-width: 20em) 中直观地切换顺序。我记得可以通过巧妙地使用浮点数和负边距来做到这一点，但我不记得我是怎么做到的。*请注意，我对所有东西都有盒子尺寸，并假设我已经完全重置。这是一个小提琴

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

4

2 回答 2

1

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

实际上，我为建议该链接而感到尴尬。适当的链接是css-tricks.com/snippets/css/a-guide-to-flexbox，这也是一个不错的链接 weblog.bocoup.com/dive-into-flexbox，两者都在讨论 flexbox。

于 2013-06-06T19:16:16.253 回答
1

您可以使用 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;
    }
}
于 2013-06-06T19:52:36.517 回答