浮动垂直对齐和ie 7问题
我的浮动 div 工作起来就像一个魅力，直到我注意到两个最上面的浮动 div 的垂直对齐有一个小错误。
如果 div 高度不同，垂直对齐就会关闭，有人知道解决这个问题的方法吗？如果间距在底部但在顶部也没关系。
我的问题的 ASCII 图：
div1|annoyinggap
|div2
|
____|____
div3 div4
|
|
|
____|____
同样在 IE 7 中，DIVS 仅显示在一列中，而不是一个漂亮的 2 x 2 网格？
相关问题： 2 x 2 div 网格使用 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 的历史，我的答案是网站的访问者使用 IE 7 来证明维护开发是合理的。任何新功能都是为 ie8/ie9 构建的。
根据要求： http://jsfiddle.net/yBMdc/ jsfiddle 测试用例。 css 实际上有所不同，抱歉，CSS 已在此处更新。
My floated divs worked like a charm, until I noticed a minor bug in the vertical alignment in the two top most floated divs.
The vertical alignment is off if the divs height is different does anyone know a fix for this? It wouldn't matter if the spacing was at the bottom but its at the top.
My ASCII diagram of the issue:
div1|annoyinggap
|div2
|
____|____
div3 div4
|
|
|
____|____
Also in IE 7 the DIVS just show in one column rather than a nice 2 x 2 grid?
Related question: 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;
}
On a side note before someone mentions it: Yes we can argue who care's about IE 7 its history, my answer is enough of the visitors to the website use ie 7 to justify maintaining development. Any new functionality is built for ie8/ie9.
As requested: http://jsfiddle.net/yBMdc/ jsfiddle test case. css actually varies apologies for this CSS has been updated here.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
确保您使用的是 DOCTYPE。
Make sure you are using a DOCTYPE.
只需修改，
http://jsfiddle.net/yBMdc/3/
Just Modify,
http://jsfiddle.net/yBMdc/3/
将
vertical-align: top添加到.Section2R2CCol。将
display: inline-block更改为：参见： http://jsfiddle.net/thirtydot/yBMdc/1/
Add
vertical-align: topto.Section2R2CCol.Change
display: inline-blockto:See: http://jsfiddle.net/thirtydot/yBMdc/1/
您不能在 ie6-7 中的块元素上使用
display: inline-block。它仅适用于内联元素。您可能应该使用float: left浮动它们。You can't use
display: inline-blockon block elements in ie6-7. It will only work with inline elements. You should probably just float them usingfloat: left.