我正在使用 Masonry 创建一个平铺的投资组合网格。我正在为我的平铺项目使用 12 列网格和几种不同的宽度。这是它在 Chrome 和 Firefox 上的样子:
和野生动物园:
我已经尝试过使用 calc、float、box-sizing 以及我能掌握的所有其他 CSS 声明。奇怪的是,如果您在 Safari 上调整窗口大小,它会自行固定在某些宽度上,这让我相信这是 CSS 计算(和亚像素舍入)。
因为 Safari 向下舍入以进行亚像素渲染,所以项目总是小于容器。
请参阅此处的代码:http: //codepen.io/tpalmer75/pen/FijEh
.item {
width: 33.33%
width: -webkit-calc(100% / 3)
width: -moz-calc(100% / 3)
width: calc(100% / 3)
display: inline-block
height: 0
float: left
padding-bottom: 25%
border: 1px solid #333
}