0

我使用 Yahoo Pure CSS 的响应式网格作为 WordPress 主题/布局的基础。

http://smartwatchapps.co.uk/module-test/

没有图像的列很好；当存在图像时，列会在 FF 和 Opera 上展开。铬/Safari 好的。

当我根据http://purecss.io/grids/添加 box-sizing:border-box 和水平填充到 Pure 单位时会发生这种情况

/* Apply padding to Pure units
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.pure-g > [class*="pure-u"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 20px;
}
img{
max-width: 100%;
height: auto;
display: block;
}

如果我删除纯单元上的 box-sizing:border-box 和填充，并将其添加到纯单元内的 div 中，也会发生同样的事情。

添加宽度：100% 修复了 FF 和 Opera 上溢出的图像，但当然这会使所有图像的容器宽度为 100%（例如，此页面上 OJ 的小图像然后扩展以填充其容器的 100%） - 所以这是不是一个可行的解决方案。

在纯 g 未嵌套在另一个页面中的其他页面上似乎不会发生：

http://smartwatchapps.co.uk/markup-image-alignment/

发疯，任何想法表示赞赏。

4

1 回答 1

1

我认为这是float: left;容器上的属性改变了行为。看起来你甚至不需要它，所以删除它。

.content-block {
    float: left; /*get rid of this line*/
}

而且我认为最好不要修改默认网格，例如应用box-size padding等margin。如果您需要在某些元素周围增加间距，只需将它们放入容器<div>并在其上设置属性，然后将其放入网格中。

于 2015-03-19T22:18:03.043 回答