Question

Fiddle

我试图制作一个响应式网格，在较大的屏幕上每行显示2个项目，在较小的屏幕上只显示一个。

现在我发现你可以用Pure.css做到这一点，但是我的语法正确并且无法正常工作。

这些物品只是保持在同一条线上，直到彼此相互依存。

<div class="pt-holder pure-u-1-2 pure-u-md-1-1">                    
    <img src="Images/pt/mikko.jpg" alt="Mikko Paavola" />
        <h3>Mikko Paavola</h3>              
        <span> 
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet dapibus quam, sit amet tempor felis egestas et. In eu metus ultrices, 
            luctus nunc egestas, euismod magna.
            ...

Answer 1

我分叉你的小提琴并为现代浏览器添加必要的网格响应-min.css并调整你的html / css。它现在有效，请在http://jsfiddle.net/macguru2000/pkfsoavg/

查看

我必须删除.pt-holder的css规则，因为纯网格的div不应该应用任何自定义规则。我还删除了.pt-holder span上的20％填充，它抵消了照片下的文字。我还交换了您的响应式网格设置pure-u-1-1 pure-u-md-1-2。让宽屏显示器显示两列，窄显示器显示一列，这对我来说更有意义。

但是......通过将纯网格类交换回pure-u-1-2 pure-u-md-1-1，您可以轻松地返回具有一个col和窄显示器的宽监视器。

所以你知道，必须包含纯响应网格css文件，下面的html代码段可用于包含核心pure.css和响应式网格（现代浏览器和旧IE）

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
<!--<![endif]-->

Answer 2

我不喜欢像Pure这样的第三方工具的原因之一是，如果您有问题，只有该工具的其他用户可以回答它！另一种方法是自己做，这是相当容易的。关于如何设置自己的网格有几个很好的解释;试试http://www.responsivegridsystem.com/的那个。

Pure.css断点不起作用

Fiddle

2 个答案: