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>

如何将深度网格“响应式流体”样式中的div推向右侧？

1 个答案: