Question

我漂浮的div工作就像一个魅力，直到我注意到两个最顶层的div中垂直对齐的一个小错误。

如果div高度不同，垂直对齐关闭有没有人知道修复此问题？如果间距位于底部但位于顶部则无关紧要。

我的问题ASCII图：

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

同样在IE 7中，DIVS只显示在一列而不是一个漂亮的2 x 2网格中？

相关问题：2 x 2 div grid using float with min-height

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的历史，我的答案足以让网站的访问者使用即7来证明维持发展。任何新功能都是为ie8 / ie9构建的。

根据要求：http://jsfiddle.net/yBMdc/ jsfiddle测试用例。 css实际上不同道歉这个CSS已经在这里更新。

Answer 1

我漂浮的div工作就像一个魅力，直到我注意到一个小错误两个顶部浮动div中的垂直对齐。

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

同样在ie 7中，div只显示在一列而不是一个漂亮的2 x 2 格？

将display: inline-block更改为：

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

请参阅： http://jsfiddle.net/thirtydot/yBMdc/1/

Answer 2

你不能在ie6-7中的块元素上使用display: inline-block。它只适用于内联元素。您可能应该使用float: left浮动它们。

Answer 3

确保您使用的是DOCTYPE。

<!DOCTYPE html>

Answer 4

只需修改，

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

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

浮动垂直对齐，即7问题

4 个答案: