如果窗口变小，则移动中间div

Question

我有三个div并排。如果浏览器窗口变小，我希望中间div在第一个div下移动，右边div移动到＆＃34;中间＆＃34;。

为了更好地理解，我做了以下概述

有人可以告诉我你是怎么做到的吗？

Answer 1

只是一个快速的技巧，但你可能需要调整一下。 http://jsfiddle.net/bd9yczqq/3/

[        <div><div class="box first"></div>
<div class="box middle"></div>
<div class="box last"></div></div>

.box{
width:200px;
    height:200px;
    float:left;
    border:1px solid #999;
    margin:5px 1%;
    background-color:#ccc;

}
.middle{

   float:right;
}

.last{
background-color:red;
}]

Answer 2

此jsfiddle应该可以帮助您入门。我分叉了Candlejack的小提琴，试图提供一个只有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显示：block;而div-2显示：inline-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;}

Answer 3

在你的css中为你的div使用相对定位并浮动它们。例如：

position:relative;
float:left;