html - 是否有实现此设计的响应方式？

Question

我想知道实现此设计的最佳方法是什么，我想应该是一种响应式的方式。这是一个模型。请注意我漂亮的蓝色方 block 。

现在，这是“移动”版本。当宽度减小到蓝色方 block 无法容纳的位置(同时保持其大小)时，它应该低于三个其他内容 block 。

我认为如果蓝色方 block 立即下降到其左侧的方 block 下方，这将是完全直接的，但这不是客户想要的。你将如何实现这一目标？

Answer 1

对于蓝色 block ，您可以在高分辨率屏幕上使用 float: right 和在低分辨率屏幕上使用 display: table-footer-group 的组合，这样您不需要移动蓝色 block 或使用隐藏的克隆。

示例:http://codepen.io/anon/pen/Kwdrdy

---

基本标记

<main>

  <aside><div>1</div></aside>
  <section>2</section>
  <section>3</section>
  <section>4</section>

</main>

CSS

section, aside { 
  margin: 10px 0;
  width: 100%;
  border: 1px #ccc solid 
}

main {
  display: table;
  width: 100%;
}

aside {
  display: table-footer-group;
}

aside div { background: #c2c1dc; width: 30%; margin: 0 auto;  }


@media all and (min-width: 600px) {

   main { display: block; }

   aside { float: right; width: 30%; margin: 0; }
   aside div { width: 100%; }
   aside + section { width: 68%; }

}

---

视口(viewport)上的屏幕截图 < 600px

视口(viewport)屏幕截图 > 600px

---

注意:display: table-* 在所有浏览器上都得到很好的支持，包括 IE8+