我的服务页面底部出现未知的空白。我在用着column-count: 2;
将图像分成两列。
更新:这是 Webkit 浏览器问题
问题是底部的额外空间mainCont
,左侧栏。
如果图像全部对齐,那么就会有大约 30 像素的不需要的空白。不过,如果图像未齐平排列,则会有大约 50-70 像素的额外空白。我在主容器上有 10 像素的填充,但我找不到是什么造成了额外的间距。
这里有一个JSFIDDLE(删除/显示在 url 中以查看代码) http://jsfiddle.net/Josh_JM/XxP6N/show/看看问题出在哪里。这里还有现场直播 http://chatfielddrilling.com/Chatfield%20V2/index.php这样您就可以看到它如何影响每个服务页面。
主容器的 CSS:
.mainCont {
width: 100%;
background: #f7f7f7;
padding: 10px;
position: relative;
margin-top: 2.5%;
}
Edit
有大约160px
底部的额外空间减去 20px(mainCont 和 gridbox img 等于 20px 的填充)。
我从昨天开始就一直在研究。
- 如果图像大小相同,则在所有浏览器上都没有问题
- 如果图像大小不同,底部会出现额外的空间
这一页。
这是chrome浏览器的bug。平衡算法有问题。他们还没有解决这个问题。你可以看到here https://code.google.com/p/chromium/issues/detail?id=297782
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)