响应式设计浮动 header，主要和旁边有 3 种方式

Question

我有一个 mobile-first 方法，其中包含 3 个容器，应该以 3 种不同的布局填充 space，如下图所示：

我可以更接近 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%; }
}

不幸的是，在第一个布局中，aside 将位于 header 的正下方，而不是主要的下方。 CSS真的可以做到吗？我也准备 JavaScript work-around。谢谢！

Answer 1

您可以使用 css3 媒体选择器：

@media screen and (max-width: 480px) {
    ...
}
@media screen and (min-width: 481px) and (max-width: 960px) {
    ...
}
@media screen and (min-width: 960px) {
    ...
}

CSS3 @ media Rule

Answer 2

您只需要 re-arrange 您的 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>

响应式设计浮动 header，主要和旁边有 3 种方式

Responsive design floating header, main and aside in 3 ways

html

javascript

css

css-float