html - 如何将 profoundgrid "responsive fluid"样式中的 div 推到右侧？

Question

我正在使用深刻的网格框架来构建响应式流体网格布局。基本上我想要实现的是创建一个包含 6 列的布局，其中菜单容器位于左侧，列宽为 1，内容位于右侧，列宽为 5。在内容中，我有一个同样流畅的嵌套网格。

我将网格用作响应式流体示例，可在此处找到:http://www.profoundgrid.com/examples/fluidresponsive.html

我的 scss 代码是这样的:

#row{
    div{@include column(6);}
    .col1{@include column(2);}
    .col5{@include column(10);}
    @include generate_grid_positions(div, 1);
}

HTML 看起来像这样:

<article id="row">
        <div id="menuContainer" class="col1">Menu <br />menu <br />menu</div>
        <div id="contentContainer" class="col5">
            <div id="projectContainer">
                <div class="project">project1</div>
                <div class="project">project2</div>
                <div class="project">project3</div>
                <div class="project">project1</div>
                <div class="project">project2</div>
                <div class="project">project3</div>
            </div>
            <div id="socialContainer">sadfgsdfg</div>
        </div>
    </article>

我现在拥有的是一个流畅的响应网格，但两个 div 相互堆叠。我想知道如何将内容向右推 2 列。

Answer 1

像这样:

<article class="grid1">
    <div class="col2 push0">menu</div>
    <div class="col2 push2">c1</div>
    <div class="col2 push4">c2</div>
    <div class="col2 push6">c3</div>
    <div class="col2 push8">c4</div>
    <div class="col2 push10">c5</div>
</article>

合并右边 5 列:

<article class="grid1">
    <div class="col2 push0">menu</div>
    <div class="col10 push2">5 times width</div>
</article>

并确保您学到的东西不多(因为它是从您的 OP 链接复制粘贴的)，您的解决方案是:

<article>
    <div class="col3">left</div>
    <div class="col9 push3">right</div>
</article>