html - IE6 浮动 div 无法正确清除

Question

我正在尝试使用浮动元素制作一个 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元素不清晰，最终水平堆叠在第一行。我怎样才能解决这个问题？

Answer 1

如果你将元素设为容器的 50% 宽度，并将它们全部浮动到左侧，那么每个元素将浮动到最后一个元素旁边，直到有 2 个元素，然后下一个元素将出现在下一行。

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

li {
    float: left;
    width: 50%;
}

Answer 2

这就是我所做的。这是对 errkk 答案的轻微改编，所以我会将他标记为已接受。

li { width: 48%; }

.odd { clear: both; }

.even { margin-left: 4%; }