當瀏覽器越來越小時，我如何將右側欄位移動到左側欄的中間

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