布置div

Question

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

我想要的最终结构如下（doctored image）：

• 我 支持IE7 +所以如果至少可以使用polyfill来实现，我很高兴。
• 我对将它们置于绝对位置
的解决方案不感兴趣
• 我对使用主要 DOM操作的解决方案不感兴趣，因为'li'的顺序对我的需求很重要。

无法自己解决这个谜语所以那里有专家吗？

PS：即使这是不可能的，也要告诉我学习的原因。

更新

• 我不能使用表格或多个UL，例如http://jsfiddle.net/wbhr8/31/因为会有很多像我这样的（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;
}

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

Answer 2

http://jsfiddle.net/wbhr8/3/

你去：）

Answer 3

这是怎么回事： jsFiddle example 。

HTML未修改。 CSS：

.container {
    height: 205px;
    width: 1000px;
    border: 1px solid black;
    vertical-align:top;
}
.box {
    width: 100px;
    height: 100px;
    background-color:yellow;
    border: 1px solid red;
    color: black;
    display:inline-block;
}

​.box1,.box2 {
    float:left;
}
.box2 {
    clear:left;
}
​

我将.box元素设置为具有内联块显示，然后浮动前两个元素，同时清除第二个元素。请注意，我只在IE7模式下运行IE8来测试，而不是实际的IE7。