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;
}

Here's a JSFiddle

这很好用，但在IE6中，even元素不会清除，最终会在第一行水平堆叠。我该如何解决这个问题？

Answer 1

如果你将元素的宽度设置为容器的50％，然后将它们全部浮动到左边，那么每个元素都会浮动到最后一个，直到有2个，然后下一个将出现在下一行。< / p>

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%; }

IE6浮动div不能正确清除

2 个答案: