html - 当浏览器变小时，如何将右列浮动到左列的中间

Question

当浏览器变小时，如何将右列浮动到左列的中间？

我想在第一个和第二个块之间浮动它。

CSS：

#leftcol{
    float:left;
    background:#039;
    width:300px

}
#rightcol{
    float:left;
    background:#3C0;
    width: 70%
}

#first{
    background:#F00;
    width:100%
}
#second{
    background:#666;
    width:100%
}

HTML：

<div>
  <div id=leftcol>leftcol
    <div id=first>first block</div>
    <div id=second>second block</div>
  </div>
  <div id=rightcol>rightcol</div>
</div>

Answer 1

更改 HTML：

<div id=first>first block</div>
<div id=rightcol>rightcol</div>
<div id=second>second block</div>

使用这个 CSS：

#rightcol{
  float:left;
  background:#3C0;
  width: 70%;
}
#first{
  float:left;
  background:#F00;
  width: 300px;
  clear: both;
}
#second{
  float:left;
  background:#666;
  width:300px;
  clear: both;
}

jsFiddle