浮動垂直對齊，即7問題

我浮動的div工作就像一個魅力，直到我注意到在兩個最浮動的div垂直對齊中的小錯誤。浮動垂直對齊，即7問題

如果divs高度不同，則垂直對齊關閉任何人都知道此問題的解決方法？如果間距在底部但是在頂部，這並不重要。

我的問題的ASCII圖：

div1|annoyinggap 
    |div2 
    | 
____|____  
div3 div4 
    | 
    | 
    | 
____|____

另外，在IE 7的DIV只是顯示在一列中，而不是一個漂亮的2×2格？

HTML/CSS：

<div class="boxContainerTop"> 
<div class="boxContainer"> 
    <div class="Section2R2CCol"></div> 
    <div class="Section2R2CCol"></div> 
    <div class="Section2R2CCol"></div> 
    <div class="Section2R2CCol"></div> 
</div> 
</div> 

.boxContainerTop { 
    float: left; 
} 

.boxContainer { 
    border: 1px solid #BBC614; 
    float: left; 
    height: auto; 
    margin-bottom: 10px; 
    margin-left: 10px; 
    margin-top: 2px; 
    width: 950px; 
} 

.Section2R2CCol:after { 
    clear: both; 
    content: "."; 
    display: block; 
    float: left; 
    height: 0; 
    line-height: 0; 
    visibility: hidden; 
} 

.Section2R2CCol { 
    display: inline-block; 
    height: auto; 
    min-height: 125px; 
    padding-top: 5px; 
    width: 470px; 
}

在一個側面說明有人提到前：是的，我們可以說誰關心的有關IE 7的歷史，我的答案是不夠的網站訪問者使用ie 7來證明維護開發的合理性。任何新功能都是爲ie8/ie9構建的。

按要求：http://jsfiddle.net/yBMdc/ jsfiddle測試用例。 CSS實際上不同，因爲這裏已經更新了CSS。

來源

2011-11-16 Anicho

莫非ÿ你做一個[jsFiddle]（http://jsfiddle.net/）測試用例？ – thirtydot

我可以嘗試，而不是jsFiddle的最大粉絲，因爲它沒有正確模擬而在過去搞砸了。給我一兩個小時就要完成一些行動了。謝謝。 :) – Anicho

嘗試關閉「標準化的CSS」。否則，如果你正在用jsFiddle掙扎，試試[JS Bin]（http://jsbin.com/）。 – thirtydot

我浮動的div工作就像一個魅力，直到我注意到一個小錯誤在兩個頂部大多數液浮div會在verticle對齊。

將vertical-align: top添加到.Section2R2CCol。

也ie ie 7 divs只顯示在一列而不是一個很好的2 x 2 網格？

更改display: inline-block到：

display: inline-block; 
*display: inline; 
zoom: 1;

參見：http://jsfiddle.net/thirtydot/yBMdc/1/

來源

2011-11-16 13:36:36 thirtydot

您是我最喜歡的html/css大師，謝謝！ – Anicho

您不能在ie6-7的塊元素上使用display: inline-block。它只適用於內聯元素。你應該使用float: left來浮動它們。

來源

2011-11-16 13:34:13 Leo

當我這樣做時，我從上面的相關問題中得到了問題。 – Anicho

確保您使用的是DOCTYPE。

<!DOCTYPE html>

來源

2011-11-16 13:36:32 Stefan

我正在使用：「<！DOCTYPE html PUBLIC」 - // W3C // DTD XHTML 1.0 Transitional // EN「」http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd「> ' – Anicho

只需修改，

.Section2R2CCol { 
    display: inline-block; 
    *float: left; 
    height: auto; 
    min-height: 125px; 
    padding-top: 5px; 
    width: 470px; 
}

http://jsfiddle.net/yBMdc/3/

來源

2011-11-16 13:49:00 anglimasS

感謝您的嘗試，但您的解決方案實際上沒有做任何事情。 – Anicho

浮動垂直對齊，即7問題

回答

相關問題