html – IE6浮动div不能正确清除

2023年7月15日 141次阅读

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

最佳答案 如果你将元素的宽度设置为容器的50％,然后将它们全部浮动到左边,那么每个元素都会浮动到最后一个,直到有2个,然后下一个将出现在下一行.

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

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