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

Question

我正在尝试创建一个简单的Meteor Web 应用程序，但我已经在努力生成一个通过Pure responsive grid 定义的有效的 2 列布局。下面的屏幕截图演示了该问题；标题应该是一行两列，而不是两（行），并且“侧边栏内容”应该在“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)；你可能会注意到根 div 定义了一个纯响应式网格（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>

partials/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>

partials/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;
}

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