Foundation - 网格结构系统问题

Question

我正在努力寻找我想要的特定网格结构，这就是我想要的：

首先我将一行分成两（6-6）行，分别对应“1”和“4”。然后使用“1”，添加新行“2”和“3”。使用“4”，我添加一行以生成“5”和“6”。但这是我的问题，我不明白在“5”上，为什么我不能有“5'”输出……我知道从“5”中添加一个独立的行会更简单，但我想要将“5”和“5'”绑定在一起（就像 1 和“2+3”一样）

这是我的代码：

    <div class="row">
    <div class="container">
        <div class="large-6 columns"> <!-- left part-->
            <div class="row">
                <div class="large-12 columns" style="height:500px;overflow:auto;backgroud:black"> <!-- 1 -->
                </div>
             </div>
            <div class="row">
                    <div class="large-9 columns" style="height:70px;backgroud:black"> <!-- 2 -->
                    </div>
                    <div class="small-3 columns text-center" style="height:70px;backgroud:blue"> <!-- 3 -->
                    </div>
            </div>
         </div>
        <div class="large-6 columns"> <!-- right part -->
            <div class="row">
                <div class="large-12 columns" style="position:relative;height:500px;background:black"> <!-- 4 -->
                </div>
            </div>

            <div class="row">
                <div class="large-5 columns no-collapse" style="height:35px;background: black"> <!-- 5 -->
                    <div class="row">
                        <div class="large-12 columns" style="height:35px;background: blue"> <!-- 5' -->
                        </div>
                    </div>
                <div class="large-7 columns no-collapse" style="height:70px;background: red"></div> <!-- 6 -->
            </div>
        </div>
    </div>
</div>

任何帮助将不胜感激，谢谢。

Answer 1

这会将您的右下方块重新排列为您显示的样子：

<div class="row">
    <div class="container">
        <div class="large-6 columns">
            <!-- left part-->
            <div class="row">
                <div class="large-12 columns" style="height:500px;overflow:auto;background:black">
                    <!-- 1 -->
                </div>
            </div>
            <div class="row">
                <div class="large-9 columns" style="height:70px;background:black">
                    <!-- 2 -->
                </div>
                <div class="small-3 columns text-center" style="height:70px;background:blue">
                    <!-- 3 -->
                </div>
            </div>
        </div>
        <div class="large-6 columns">
            <!-- right part -->
            <div class="row">
                <div class="large-12 columns" style="position:relative;height:500px;background:black">
                    <!-- 4 -->
                </div>
            </div>
            <div class="row">
                <div class="large-7 columns">
                    <div class="row">
                        <div class="large-12 columns" style="height:35px;background: blue">
                            <!-- 5 -->
                        </div>
                    </div>
                    <div class="row">
                        <div class="large-12 columns" style="height:35px;background: blue">
                            <!-- 5' -->
                        </div>
                    </div>
                </div>
                <div class="large-5 columns" style="height:70px;background: red">
                    <!-- 6 -->
                </div>
            </div>
        </div>
    </div>
</div>

A fiddle of this with borders to identify rows and columns

Foundation - 网格结构系统问题

Foundation - Grid structure System issue

html

grid

grid-system

zurb-foundation

twitter-bootstrap-3