javascript - 布局div

Question

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

我想要的最终结构如下（修改后的图像）：

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

自己解不了谜，有高手吗？？？

PS：即使这是不可能的，也请给我学习的理由。

更新：

• 我不能使用一个表或多个 UL，比如http://jsfiddle.net/wbhr8/31/因为会有很多像这样的 'li's (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示例。

未修改的 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。