我正在尝试创建一个简单的Meteor Web 应用程序,但我已经在努力生成一个通过Pure responsive grid定义的工作 2 列布局。下面的屏幕截图演示了该问题;标题应该是一行的两列,而不是两列(行),并且“侧边栏内容”应该在“Ace Editor Demo”左侧的列中:
您也可以访问我的应用程序的实时版本来亲自查看问题。此外,我已经在github上发布了该项目。
如果有人能指出为什么我预期的 2 列布局没有按预期工作,我会非常高兴。我已经使用 Chromium 28.0.1500.71 和 Firefox 23.0 进行了测试。
代码
造型
这是应用程序的样式表(用Stylus编写):
menu-background = #272F32
menu-color = #DAEAEF
padding-horizontal = 3em
padding-vertical = 1em
padding-top = 35px
.content
border-radius: 10px
margin-top 39px
background-color white
padding-left 0px
padding-right 0px
// padding-top padding-vertical
padding-bottom padding-vertical
.content-ribbon
background-color white
//padding-left padding-horizontal
//padding-right padding-horizontal
#sidebar
padding-left: 20px
padding-top: padding-top
#editor-container
padding-top: padding-top
border-left: 1px solid
padding-left: padding-horizontal
height: 600px
& > h1
margin-top: 0
.ace_editor
width: 700px
height: 500px
#menu
background-color menu-background
.pure-menu-heading
//padding-left: 40px
//padding-right: 7px
// width: 170px
color white
li
a
color menu-color
&:hover
background-color rgb(51, 51, 51)
&.pure-menu-selected
a
-webkit-box-shadow inset 0 3px 8px rgba(0, 0, 0, 0.125)
-moz-box-shadow inset 0 3px 8px rgba(0, 0, 0, 0.125)
box-shadow inset 0 3px 8px rgba(0, 0, 0, 0.125)
background-color: #111111
color rgb(220, 220, 220)
footer
//margin-top 5em
margin-top 0px
border-top 1px solid menu-background
padding 1em
color black
text-align center
font-size 80%
HTML
应用程序的 HTML,一个 Angular 模板 (angular.html) 和一个部分 (partials/home.html);您可能会注意到根 div 定义了一个纯响应式网格(类pure-g-r
),列是通过类pure-u-1-5
(左列)和pure-u-4-5
(右列)定义的:
角.html
<div class="content pure-g-r" data-ng-controller="MeteorCtrl">
<header class="pure-u-1">
<nav id="menu" class="pure-menu pure-menu-open pure-menu-fixed pure-menu-horizontal">
<div class="pure-u-1-5">
<div class="pure-menu-heading">Meteor-Ace</div>
</div>
<ul class="pure-u-4-5">
<li data-ng-repeat="menuItem in menuItems">
<a href="{{menuItem.address}}">{{menuItem.name}}</a>
</li>
</ul>
</nav>
</header>
<article id="content" class="pure-u-1">
<div class="pure-g-r content-ribbon">
<div class="pure-u-1">
<div data-ng-view></div>
</div>
</div>
<footer class="pure-u-1">
Made with the excellent <a href="http://meteor.com/">Meteor</a> framework and
<a href="http://meteor.com/">AngularJS</a>. © 2013 Arve Knudsen
</footer>
</article>
</div>
部分/home.html
<div class="pure-u-1-5">
<div id="sidebar">Sidebar Content</div>
</div>
<div class="pure-u-4-5">
<div id="editor-container">
<h1><a href="http://ace.c9.io/">Ace</a> Editor Demo</h1>
<!--<div data-ui-ace></div>-->
</div>
</div>