标签: yui-pure-css

如何vertical-align: middle使用PureUI从YUI添加元素？

我有三个具有相同高度的元素,我想要,"内部",他们有vertical-align: middle.

=> 检查jsfiddle:http://jsfiddle.net/kn88b/1/

我得到的最接近的是display: table; width: 100%,但这个BUG是"移动版",所以我想要一个适用于所有版本(平板电脑/台式机/手机)的解决方案.

有人能告诉我一个如何使用purecss.io来实现固定宽度/响应式设计的示例,类似于像引导程序一样的960网格等等吗？

流体宽度根本不适用于我的特定设计,这是我目前拥有的:

    <nav class="pure-u" id="menu">
      <div class="pure-menu pure-menu-open">
        <a class="pure-menu-heading" href="/">HOME</a>
        <ul>
          <li class="pure-menu-selected"><a href="#">Clients</a></li>
          <li><a href="#">Company</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Service</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </nav>

    <div class="pure-u-1" id="main">
      This is the main content area          
    </div>
  </div>        

</body>

我需要将上面的内容包裹在一个包含DIV的中心内,其固定宽度为960,但可根据需要进行相应调整......

有任何想法吗？？？

问候,亚历克斯

文档不包含嵌套网格的任何示例.有人可以发布嵌套网格的例子

我想要一个purecss网格.当它崩溃时(即较小屏幕上的断点)是否可以说右网格项出现在左网格项之前？是某种崩溃秩序？我可以使用flexbox模型相信这些内容.但我不是一个高手,所以指导将非常感激.

谢谢.

使用Bootstrap 3,可以轻松地将多个列集中在一起,如下所述:http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns

是否可以使用Yahoo pure.CSS执行此操作？如果是,怎么样？

对于您的建议和帮助提前多多感谢!

首先,我对CSS很新,所以我希望我没有做过任何可怕的愚蠢行为.

基本上,我有一个设计,我正在使用Pure构建,宽度在谷歌Chrome中播放,而它在Firefox中的工作原理.

这是我所做的链接:http://egf.me/Rushd/rushdtest.html和截图:

• Firefox:http://i.imgur.com/mn3GIbT.png
• Chrome:http://i.imgur.com/44jLC6J.png

如果你看一下网页源代码,我还没有真正做了什么,我自己的CSS改变什么(我评论了这一切作为检查以防万一),所以我我莫名其妙地使用纯猜测错误,因为他们自己的网站在Chrome上呈现良好.

此外,使用Chrome的开发工具检查元素显示应该彼此相邻的div元素的宽度加起来小于父元素的宽度.似乎没有任何缓冲区或填充.此外,如果我手动减少宽度非常小,Chrome似乎神奇地修复了一切.

我正在使用Pure CSS框架,我的代码看起来像

<div class="container pure-g">

 <header class='pure-u-1'>
  <h1 class='logo'>
    <a href="#">TEST</a>
  </h1>
  <nav class="pure-menu pure-menu-open pure-menu-horizontal">
    <ul>
        <li><a href="#">Example Link 1</a></li>
        <li><a href="#">Example Link 2</a></li>
    </ul>
  </nav>
 </header>
</div>

这是一个JSfiddle:http://jsfiddle.net/ME4jv/

我要做的是将徽标(左侧浮动)与导航链接(向右浮动)对齐,但浮动和网格系统都不起作用.