1

小提琴

我正在尝试制作一个响应式网格，在较大的屏幕上每行显示 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.
            ...
4

2 回答 2

1

我已经分叉了你的 Fiddle 并为现代浏览器添加了必要的 grids-responsive-min.css 并调整了你的 html/css。它现在可以工作了，请在http://jsfiddle.net/macguru2000/pkfsoavg/上查看

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

但是......您可以通过将纯网格类交换回pure-u-1-2 pure-u-md-1-1.

所以你知道，必须包含纯响应式网格 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]-->
于 2014-12-03T23:18:29.040 回答
-6

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

于 2014-10-12T23:41:50.060 回答