yui-pure-css - YUI 纯 css 固定宽度

Question

有人可以给我看一个例子，说明我如何使用 purecss.io 来实现固定宽度/响应式设计，类似于 bootstrap 等 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 中，该 DIV 居中并具有 960 的固定宽度，但可根据需要进行响应调整...

有任何想法吗？？？

问候，亚历克斯

Answer 1

希望这会有所帮助：http: //jsfiddle.net/pX7bD/。这个想法是将所有内容包装在一个 div 中，该 div 具有固定的最大宽度和自动水平边距（因此它居中）。

#wrapper { max-width: 960px; margin: 0 auto; }