javascript - div のレイアウト

Question

現在の基本構造: http://jsfiddle.net/sv_in/wbhr8/

私が望む最終的な構造は以下のようなものです(ドクター画像):

• IE7+をサポートしないといけないので、せめてポリフィルでも実現できれば嬉しいです。
• それらを絶対的な位置に配置するソリューションには興味がありません
• 「li」の順序は私のニーズにとって重要であるため、主要なDOM操作を使用したソリューションには興味がありません。

なぞなぞを自分で解決できなかったので、専門家はいますか???

PS: たとえそれが不可能だとしても、私が学ぶ理由を教えてください。

アップデート：

• http://jsfiddle.net/wbhr8/31/のようなテーブルや複数の UL を使用することはできません。このような 'li's (20+) がたくさんあるので、最初の 1 つまたは 2 つを削除する必要があるかもしれませんが、このレイアウトのままです。維持する必要があります。
• アイテムの数は動的であるため....このレイアウトがすべてのアイテムで機能することを望みます。

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

これはどうですか: 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要素をインライン ブロック表示に設定し、最初の 2 つをフロートさせ、2 つ目をクリアしました。実際のIE7ではなく、IE7モードでテストするIE8のみを実行していることに注意してください。

Answer 3

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

どうぞ:)