javascript - 布置div

Question

目前的基本结构:http://jsfiddle.net/sv_in/wbhr8/

我想要的最终结构如下(篡改图像):

• 我必须支持 IE7+，所以如果它至少也可以通过 polyfills 实现，我很高兴。
• 我对将它们定位在绝对位置
的解决方案不感兴趣
• 我对使用主要DOM 操作 的解决方案不感兴趣，因为“li”的顺序对我的需要很重要。

自己无法解开这个谜题，请问有高手吗？？？

PS:即使这是不可能的，请给出你让我学习的理由。

更新:

• 我不能使用表格或多个 UL，例如 http://jsfiddle.net/wbhr8/31/因为会有很多像这样的“li”(20 多个)，我可能需要删除第一个或两个，但仍应保留此布局。
• 元素的数量将是动态的，所以......希望这种布局适用于所有元素。

Answer 1

我的感觉是，如果不诉诸一些定位上的愚蠢行为，这是不可能的，就像这样:

http://jsfiddle.net/wbhr8/95/

<ul class="container">
   <li class="box">1</li>
   <li class="box even">2</li>
   <li class="box">3</li>
   <li class="box even">4</li>
   <li class="box">5</li>
   <li class="box even">6</li>
</ul>

.container {
   height: 205px;
   width: 1000px;
   border: 1px solid black;
   overflow:hidden;
}

.box {
   width: 100px;
   height: 100px;
   background-color:yellow;
   border: 1px solid red;
   color: black;
   float:left;
}

.even{
   position: relative;
   top: 102px;
   margin-left: -102px;
}

原因是它目前不在工具包中。