基础 - 网格结构系统问题

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