Purecss 网格未按预期工作

Question

我正在使用 http://purecss.io/grids/ 上的文档并基本上复制示例代码以创建三分之二的网格

<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>

然而，它根本没有像文档中解释的那样显示 - 3 列相等的三分之一：http://jsfiddle.net/a7rnzn5f/1/

我有什么不明白的？

Answer 1

您可能没有参考 purecss 网格的响应部分。

根据您提供的link：

Since media queries cannot be over-written, we do not include the grid system as part of pure.css. You'll have to pull it in as a separate CSS file. You can do this by adding the following tag to your page.

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

加上那个，你就可以开始了！

编辑： 对不起，我没注意到你的 fiddle。看起来你只是做了相反的事情。看起来您没有包含对 purecss 的基本引用。 I updated your fiddle 使用下面的参考，它似乎有效。

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">

Purecss 网格未按预期工作

Purecss grids not working as expected

yui-pure-css