html - 如果窗口变小，则将中间的 div 向下移动

Question

我有三个并排的 div。如果浏览器窗口变小，我希望中间的 div 向下移动到第一个 div 下方，而右边的 div 移动到“中间”。

为了更好的理解，我做了以下大纲

谁能告诉我你会怎么做？

Answer 1

这jsfiddle应该让你开始。我 fork 了 Candlejack 的 fiddle ，并试图提供一个仅 css 的解决方案。

基本上你把第二个 div 放在最后:

<section id='container'>
  <div id='box-1' class='myBox'>1</div>
  <div id='box-3' class='myBox'>3</div>
  <div id='box-2' class='myBox'>2</div>
</section>

然后你向左浮动div-1和div-2，而div-3向右浮动，div-1和div-3有display: block;而 div-2 显示:内联 block ；

#container { display:inline-block; width:100%; padding: 0.5em 0; border: 1px solid black;}
.myBox { display:inline-block; min-height: 100px; width:300px; margin: 0.5em 0 0.5em 3%; float:left; display: block; }
#box-1 { border:1px solid blue;}
#box-2 { border:1px solid red; display: inline-block; float: left;}
#box-3 { border:1px solid green;float:right;}