0

我正在使用深刻的网格框架来构建响应式流体网格布局。基本上我想要实现的是创建一个包含 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 列向右推。

4

1 回答 1

0

像这样 ：

<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>
于 2013-10-10T15:05:11.710 回答