javascript - 响应式设计 float header ，主要和旁边有3种方式

我有一个移动优先的方法，其中有3个容器，应以3种不同的布局填充空间，如下图所示：



我可以更接近CSS的是：

HTML：

<header>...</header>
<aside>...</aside>
<main>...</main>

的CSS

@media screen and (max-width: 480px) {
    header,
    main,
    aside { width: 100%; }
}

@media screen and (max-width: 960px) {
    main { float: left; width: 60%; }
    aside {float: right; width: 40%; }
}

@media screen and (min-width: 961px) {
    header: { float: left; width: 60%; }
}

不幸的是，在第一个布局中，旁边将位于标题下方，而不是主体下方。真的可以用CSS完成吗？我也愿意尝试JavaScript解决方法。谢谢！

最佳答案

您只需要为第一个布局重新排列HTML。这是3种布局的简单CSS解决方案。

* {margin:0;}
header {
  background: #eee;
}
main {
  background: #ddd;
}
aside {
  background: #ccc;
}
header,main,aside {
  min-height: 100px;
}
@media screen and (min-width: 481px) and (max-width: 960px) {
  main {
    float: left;
    width: 60%;
  }
  aside {
    width: 40%;
    float: left;
  }
}
@media screen and (min-width: 960px) {
  header, main {
    max-width: 60%;
  }
  aside {
    width: 40%;
    position: absolute;
    top: 0; right: 0;
    bottom: 0;
  }
}

<header>header</header>
<main>main</main>
<aside>aside</aside>

关于javascript - 响应式设计 float header ，主要和旁边有3种方式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41857075/