purecss在这里发生了什么?

时间:2013-06-13 13:04:52

标签: css css3 yui-pure-css

我正在尝试将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相关联,但评论中没有任何解决方法适用于我。

2 个答案:

答案 0 :(得分:8)

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>

答案 1 :(得分:0)

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

.pure-g-r {
letter-spacing: -.31em;
}
这导致疯狂的字母间距

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