Javascript 在相对定位的网页中，如何在内联DIV的第二行中向右浮动DIV？

我已经相对定位的网页-它扩大和缩小用户的屏幕分辨率。因为更容易绘制我的场景，下面是我的简化布局：

下面是简化的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...

我的问题显示在图片上-我需要。广告右侧浮动，但在第二行。它在其他浏览器中运行良好，但IE是问题所在，它只是将.ad浮动到下一行第三行。是否有交叉浏览器IE7和以上，可能纯CSS不条件，JS可以用于解决这个问题

---

非常感谢您。

这似乎是一种网格系统，例如-有一些css网格框架，我怀疑他们已经解决了这个问题…

这似乎在IE中对我起作用，我添加了一个固定宽度的包装来包含它，但它应该可以在没有宽度的情况下工作

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>

我所做的：盒子只是漂浮着，从左到右填满了空地。广告显示为内联块，因此它受包装上文本对齐的影响。

---

广告将被向右拉，块将填满另一个空间。

好吧，它不是那样的网格系统，因为我的页面宽度可变，所以我不能使用固定的列大小。实际上我不知道有多少列会呈现在用户的屏幕上，因为这取决于他或她的屏幕分辨率。是的，你可能应该使用网格，有很多响应网格框架使用%宽度，所以保持流畅。从以下列表中选择：此场景是否放置在固定大小的包装内？否，它的宽度根据用户的屏幕分辨率而灵活。

<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>

.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;
}