1

シンプルなMeteor Web アプリケーションを作成しようとしていますが、 Pure レスポンシブ グリッドを介して定義された機能する 2 列のレイアウトを作成するのに既に苦労しています。問題は、以下のスクリーンショットに示されています。見出しは 2 列 (行) ではなく 1 行に 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(右の列)によって定義されていることに気付くかもしれません。

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>
4

2 に答える 2

0

2 つの列は div であるため、フローティングにする必要があります。

float: left;次のように追加してみてください：

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

これは、フロートを追加すると得られるものです。

イムグル

于 2013-09-03T19:26:29.667 に答える