标签: yui-pure-css
推荐指数
解决办法
查看次数
Purecss网格偏移类
我一直在评估purecss,并想知道在它的网格系统中是否有相当于Bootstrap的偏移类.
网格doco没有提到这样的事情.
谢谢
推荐指数
解决办法
查看次数
PureCSS.io - 纯网格(高度)在Firefox中显示不同
我正在使用PureCSS的纯网格.我有pure-g三个pure-u-1-3,包含几个段落.问题是,当其中一个单元比其他单元长时,Chrome/IE和Firefox之间的显示会有所不同.
http://i.stack.imgur.com/VFVYu.png
我试图使用jQuery计算最高值pure-u-1-3并将其余部分设置为此高度.但它没有像预期的那样工作,因为这个网格也必须响应(使用pure-g-r)
有谁知道如何让Firefox产生相同的输出？
推荐指数
解决办法
查看次数
扩展pure-css网格以获得排水沟的最佳方法
我是从SUITCSS背景来到Pure CSS(Yahoo!框架),我正在寻找一种将排水沟添加到多列网格的简洁方法.
我已经看到了提到l-box技术,但找不到一个像样的例子.
这是我正在尝试的,通过添加pure-g-gutter类:
.pure-g .pure-g--gutter {
margin: 0 -0.5rem;
}
.pure-g .pure-g--gutter > div {
padding: 0 0.5rem;
}
不幸的是,虽然这似乎设置了预期的边距和填充,但它也会导致网格将第二列(两列)重排到下一行.
PureCSSers:你用什么来实现排水网格列？
推荐指数
解决办法
查看次数
使用Pure css后我们是否需要包括normalize？
我认为雅虎的Pure很棒.但我在想,使用Pure后我们是否需要包含normalize.css？
推荐指数
解决办法
查看次数
如何垂直对齐标签和选择框(中)
对于那里的CSS大师,我无法弄清楚使第一个标签/选择对不是中间对齐的css,但是第二个在中间对齐.
请参阅下图中的问题.我的目标是让第一个标签/选择对在中间对齐,并理解实现它的css规则.
<div class="pure">
<form class="pure-form-inline">
<div class="pure-g">
<div class="pure-u labelArea">
<label>Choose Project:</label>
</div>
<div class="pure-u-1-4">
<select></select>
</div>
</div>
<div class="pure-control-group">
<label>Choose Customer:</label>
<select></select>
</div>
</form>
</div>
在这里你可以看到这个在行动...... 小提琴
推荐指数
解决办法
查看次数
Pure-CSS网格默认代码不起作用
使用Pure网格,我的网站没有正确响应,所以我尝试将默认的响应式网格代码复制并粘贴到我的文件中,但仍然无法正常运行.
这是他们网站上列出的默认代码:
<div class="pure-g">
<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>
</div>
我的完整代码可以在这里找到.W¯¯ 母鸡在浏览器中查看下面的代码,所述三组点的出现,就好像它们被堆叠在彼此的顶部,或者在100%列的宽度.从每个类列表中删除"pure-u-1"显示它们就好像这些点都非常小而且彼此叠加,字面上(不像块一样堆叠,因为你只能看到一组点).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>B&W Vending</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
</head>
<body>
<div class="pure-g">
<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>
</div>
</body>
</html>
推荐指数
解决办法
查看次数
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
在查看示例时,我的代码似乎是正确的,所以我必须做一些非常明显/愚蠢的事情......
编辑:
推荐指数
解决办法
查看次数
purecss pure-menu-item无法正常工作
此菜单代码是http://purecss.io/menus/中的第一个示例.
但它很糟糕:(
每个<li>项目彼此保持距离.如果向下滚动,则会看到其他项目.
但它适用于purecss.io/menus页面.我不知道为什么.
(这里当你运行它也可以正常工作......你必须使用这段代码创建一个html文档,然后它失败......)
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
</head>
<body>
<div class="pure-menu">
<span class="pure-menu-heading">Yahoo Sites</span>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Messenger</a>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a>
</li>
<li class="pure-menu-heading">More Sites</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Games</a>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">OMG!</a>
</li>
</ul>
</div>
</body>
</html>我见过pure-menu-item有一个height: 100%,我觉得有点奇怪.这是问题吗？
推荐指数
解决办法
查看次数
打开菜单时,网站会缩小
我正在使用Yahoo的PureCSS库以及侧边栏的插件,除了移动Safari之外,它在所有浏览器上运行良好.出于某种原因,只要打开菜单,它就会缩小.这甚至发生在文档的示例中.我不知道是什么原因引起了这种情况,但它很容易被称为浏览器错误.
如有必要,我可以把JSFiddle放在一起.
推荐指数
解决办法
查看次数