如何在位於相對位置的網頁中的內聯DIV的第二行中浮動DIV？

Question

我有相對定位的網頁 - 用戶的屏幕分辨率擴大和縮小。因爲它更容易吸引我的方案，這是我的簡化佈局：

這裏是簡單的HTML：

<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="ad"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
etc... 

CSS是這樣的：

.box { width:200px;height:300px;display:inline-block;*display:inline;margin-right:20px } 
.ad { width:420px;height:300px;float:right } 

我的問題顯示在圖片上 - 我需要.ad右移，但在第二行。它在其他瀏覽器中工作正常，但IE是問題，它只是漂浮在下一行（第三行）的.ad。是否有交叉瀏覽器（IE7和以上），可能是純CSS（不適用，JS可以使用）的解決方案？

非常感謝您提前。

Answer 1

這似乎在IE中被工作我，我添加了一個固定寬度的包裝來包含它，但它應該沒有寬度。

http://jsfiddle.net/9c2Fh/2/

HTML，：

<div class='wrapper'> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="ad"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
</div> 

CSS

.box { 
    width:100px; 
    background:red; 
    height:100px; 
    float:left; 
    margin:5px 
} 
.ad { 
    display:inline-block; 
    position:relative; 
    background:green; 
    width:200px; 
    height:100px; 
    margin:5px; 
} 
.wrapper{ 
    text-align:right; 
    float:left; 
    width:330px; 
} 

我做了什麼：這些盒子只是浮動，並填補了開放空間由左到右。該廣告顯示爲內聯塊，因此它受包裝器上文本對齊的影響。 廣告將被拉到右側，塊填滿其他空間。

Answer 2

這似乎是一種網格系統，如http://960.gs/ - 有幾個CSS網格框架存在，並且我懷疑他們已經解決了這個...