Question

我正在尝试将purecss与我一直在努力的项目进行整合。

由于某些原因，它只是为了我的布局，所以我试图创建一个非常原始的模板（下面），我只是得到有趣的字母间距。发生了什么事？

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.0/pure-min.css">
    </head>
    <body>
      <div class="pure-g-r">
        <div class="pure-u-2-4">
          <p>Left side.</p>
        </div>
        <div class="pure-u-2-4">
          <p>Right side.</p>
        </div>
      </div>
    </body>
</html>

JSBin显示问题：

http://jsbin.com/ubarag/1/edit

在查看示例时，我的代码似乎是正确的，所以我必须做一些非常明显/愚蠢的事情......

编辑：

似乎与这些two issues相关联，但评论中没有任何解决方法适用于我。

Answer 1

Pure无法识别班级pure-u-2-4。而是使用类pure-u-1-2来获取宽度为50％的列：

<div class="pure-g-r">
  <div class="pure-u-1-2">
    <p>Left side.</p>
  </div>
  <div class="pure-u-1-2">
    <p>Right side.</p>
  </div>
</div>

Answer 2

在第14行的pure-min.css中你有这个

.pure-g-r {
letter-spacing: -.31em;
}

这导致疯狂的字母间距

删除它或在其他css文件中重写

purecss在这里发生了什么？

2 个答案: