4

フローティング要素を使用して2列の「テーブル」を作成しようとしています:

<ul>
  <li class="odd">This will appear on the left</li>
  <li class="even">This will appear on the right</li>
  <li class="odd">This will appear on the left (2)</li>
  <li class="even">This will appear on the right (2)</li>
  <li class="odd">This will appear on the left (3)</li>
  <li class="even">This will appear on the right (3)</li>
</ul>

CSS:

ul { 
    margin: 20px 0px; 
    width: 880px;
}

li {
    position: relative;
    float: left;
    width: 410px;
    margin: 0px 0px 10px 0px;
    padding: 0;
}

.odd { clear: left; }

.even {
    clear: right;
    margin-left: 50px;
}

ここにJSFiddleがあります

これはうまく機能しますが、IE6 ではeven要素がクリアされず、最初の行に水平に積み上げられてしまいます。どうすればこれを修正できますか?

4

2 に答える 2

2

要素をコンテナーの幅の 50% にして、それらをすべて左にフロートすると、2 つになるまでそれぞれが最後の要素の隣にフロートし、次の要素が次の行に表示されます。

ul { 
    width: 880px;
    overflow:hidden; /* to clear */
}

li {
    float: left;
    width: 50%;
}
于 2012-05-23T11:00:51.623 に答える
0

これが私がしたことです。これは errkk の回答を少し修正したものなので、彼を承認済みとしてマークします。

li { width: 48%; }

.odd { clear: both; }

.even { margin-left: 4%; }
于 2012-05-23T11:45:55.953 に答える