html - 当浏览器变小时，如何将右栏 float 到左栏的中间

Question

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

我想将它 float 在第一 block 和第二 block 之间。

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