为什么我的2列Pure CSS布局不起作用？

Question

我正在尝试创建一个简单的Meteor Web应用程序，但我已经在努力生成通过Pure responsive grid定义的工作2列布局。这个问题在下面的截图中说明;标题应该是一行上的两列，而不是两行（行），“Sidebar Content”应该位于“Ace Editor Demo”左侧的列中：

您也可以访问我的应用程序的live version，以便自己查看问题。另外，我已在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）;你可能会注意到root div定义了一个Pure响应网格（类pure-g-r），这些列是通过类pure-u-1-5（左列）和pure-u-4-5（右列）定义的：

angular.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>

Answer 1

事实证明，问题是我在列（oops）中嵌套了网格列。以下HTML已得到纠正，并且没有出现任何布局问题：

angular.html

<div class="content pure-g-r" data-ng-controller="MeteorCtrl">
    <header>
        <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">
        <div class="content-ribbon">
                <div data-ng-view></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>

Answer 2

这两列是div，所以它们需要浮动。

尝试添加float: left;，如下所示：

.pure-g-r [class *= "pure-u"] {
  font-family: sans-serif;
  float: left;
}

这是我添加浮动时得到的结果：