有人能告诉我一个如何使用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,但可根据需要进行相应调整......
任何想法???
此致 亚历
答案 0 :(得分:11)
希望这会有所帮助:http://jsfiddle.net/pX7bD/。 我们的想法是将所有内容包装在一个具有固定最大宽度和自动水平边距的div中(因此它居中)。
#wrapper {
max-width: 960px;
margin: 0 auto;
}