如何在相对定位的网页中将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网格框架，我怀疑他们已经解决了这个问题……