Question

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

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

没有图像的列很好;当图像存在时，列在FF和Opera上展开。 Chrome / Safari确定。

向纯单位添加box-sizing：border-box和horizontal padding时会发生这种情况

＆＃13;

/* 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;
}

＆＃13;

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

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

似乎没有其他页面上发生pure-g没有嵌套在另一个页面中：

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

坚持不懈，任何想法都会受到赞赏。

Answer 1

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

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

我认为不要修改默认网格是个好主意，例如应用box-size padding和margin等。如果你需要在某些元素周围留出额外的间距，那就放将它们放入容器<div>并在其上设置属性，并将其放入网格中。

纯CSS：响应式图像在Firefox和Opera上打破带有边框和填充的列

1 个答案: