IE6浮動的div不清除正確

我試圖讓使用浮動元素有2列 '表'：IE6浮動的div不清除正確

<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元素不清晰，最後在第一行水平堆疊。我怎樣才能解決這個問題？

來源

2012-05-23 fredley

如果您刪除了'clear：left'和'clear：right'，那麼您的演示在現代瀏覽器中不會改變，並且它可以在IE6中使用。你需要「清晰」嗎？其中一個原因是如果你的「li」不總是相同的高度。另外，你爲什麼支持IE6？根據http://www.ie6countdown.com/，它在英國的市場份額爲1.4％。 – thirtydot

@thirtydot支持不是我的決定（我們的產品支持NT4！）。元素的高度不一樣，我認爲需要水平對齊。 – fredley

這種方法適用於IE6：http://jsfiddle.net/thirtydot/SE2Mn/。你怎麼看？ – thirtydot

怎麼樣，如果你做的容器中的元素50％的寬度，並將它們全部浮到左邊，然後每次都會倒數第二浮動，直到有2個，那麼下一個會出現在下一行。

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

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

來源

2012-05-23 11:00:51 errkk

這將會變得有點討厭，當我試圖把在空白處爲右手元素 – fredley

這就是我所做的。這是errkk答案的一個小改動，所以我會將他標記爲已接受。

li { width: 48%; } 

.odd { clear: both; } 

.even { margin-left: 4%; }

來源

2012-05-23 11:45:55 fredley

IE6浮動的div不清除正確

回答

相關問題