Foundation Grid 将小面板放在大面板之前

Question

我正在尝试创建一个仅视觉（无文本，标题除外）样式的网页。

为了使此页面具有最佳外观，我希望每个可点击框的大小都不同。

这就是我想要的。

__________________________
|                 |   2   |
|         1       |_______|
|                 |   3   |
|_________________|_______|
|_4_|_5_|        8        |
|_6_|_7_|_________________|

到目前为止，我有方框 1、2 和 3。我遇到的问题是 4、5、6 和 7。因为它们小于方框 8，而不是我想要的，我让它们像下面这样显示，这会打断流程，留下空白，并将页面扩展到一个屏幕之外。

|_4_|_5_|_6_|_7_|
|        8        |
|_________________|

如何格式化代码以使布局符合我的要求？

下面是我的代码，所有基础框架都是标准的。

<body class="blackbackground">
<div class="fixed" id="includeHeader"></div>
  <div class="fullwidth row collapse">
    <div class="large-8 medium-12 relative columns">
        <a href="#" class="darken"><img src="img/r3gamersHome.png"/>
            <div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
               <h2 class="brighten">Portfolio</h2>
            </div>
        </a>
    </div>
    <div class="large-4 medium-12 relative columns border">
         <a href="#" class="darken"><img src="img/r3gamersHome.png"/>
            <div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
                <h2 class="brighten">Contact</h2>
            </div>
         </a> 
    </div>
    <div class="large-4 medium-12 relative columns border">
         <a href="#" class="darken"><img src="img/r3gamersHome.png"/>
            <div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
                <h2 class="brighten">r3gamers.com</h2>
            </div>
         </a> 
    </div>
  </div>

  <div class="fullwidth row collapse">
    <div class="large-8 medium-12 relative columns">
        <a href="#" class="darken"><img src="img/r3gamersHome.png"/>
            <div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
               <h2 class="brighten">Portfolio</h2>
            </div>
        </a>
    </div>
    <div class="large-4 medium-12 relative columns border">
         <a href="#" class="darken"><img src="img/r3gamersHome.png"/>
            <div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
                <h2 class="brighten">Contact</h2>
            </div>
         </a> 
    </div>
    <div class="large-4 medium-12 relative columns border">    
        <div class="fullwidth row collapse large-4">
            <div class="fullwidth row collapse large-4">
                <div class="large-6 medium-6 relative columns border">
                  <a href="#" class="darken"><img src="img/r3gamersHome.png"/>
                      <div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
                         <h2 class="brighten">About Me</h2>
                      </div>
                  </a>
                </div>
                <div class="large-6 medium-6 relative columns border">
                  <a href="#" class="darken"><img src="img/r3gamersHome.png"/>
                      <div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
                         <h2 class="brighten">About Me</h2>
                      </div>
                  </a>
                </div>
            </div>
            <div class="fullwidth row collapse large-4">
                <div class="large-6 medium-6 relative columns border">
                  <a href="#" class="darken"><img src="img/r3gamersHome.png"/>
                      <div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
                         <h2 class="brighten">About Me</h2>
                      </div>
                  </a>
                </div>
                <div class="large-6 medium-6 relative columns border">
                  <a href="#" class="darken"><img src="img/r3gamersHome.png"/>
                      <div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
                         <h2 class="brighten">About Me</h2>
                      </div>
                  </a>
                </div>
            </div>
        </div>
    </div>
  </div>




<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
  $(document).foundation();
</script>

Answer 1

我找到了一个文档来回答我的问题。问题是我没有将包含 4、5、6、7 的 4 行部分分成两行。因此，我在 4 和 5 之后添加 6 和 7，或者在网页流中的下一行，而不是在它自己的小部分中。下面添加了固定代码，以及引导我找到正确答案的网页。（课程应该真的包含在文档中）。

  <body class="blackbackground">
<div class="fixed" id="includeHeader"></div>
  <div class="fullwidth row collapse">
    <div class="large-8 medium-12 relative columns">
        <a href="#" class="darken"><img src="img/r3gamersHome.png"/>
            <div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
               <h2 class="brighten">Portfolio</h2>
            </div>
        </a>
    </div>
    <div class="large-4 medium-12 relative columns border">
         <a href="#" class="darken"><img src="img/r3gamersHome.png"/>
            <div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
                <h2 class="brighten">Contact</h2>
            </div>
         </a> 
    </div>
    <div class="large-4 medium-12 relative columns border">
         <a href="#" class="darken"><img src="img/r3gamersHome.png"/>
            <div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
                <h2 class="brighten">r3gamers.com</h2>
            </div>
         </a> 
    </div>
  </div>

  <div class="fullwidth row collapse">
      <div class="large-2 columns">
          <div class="row">
              <a href="#" class="darken"><img src="img/r3gamersHome.png"/>
                <div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
                   <h2 class="brighten">About Me</h2>
                </div>
              </a>
          </div>
          <div class="row">
              <a href="#" class="darken"><img src="img/r3gamersHome.png"/>
                <div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
                   <h2 class="brighten">About Me</h2>
                </div>
              </a>
          </div>
      </div>
      <div class="large-2 columns">
          <div class="row">
              <a href="#" class="darken"><img src="img/r3gamersHome.png"/>
                <div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
                   <h2 class="brighten">About Me</h2>
                </div>
              </a>
          </div>
          <div class="row">
              <a href="#" class="darken"><img src="img/r3gamersHome.png"/>
                <div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
                   <h2 class="brighten">About Me</h2>
                </div>
              </a>
          </div>
      </div>
      <div class="large-8 columns">
          <a href="#" class="darken"><img src="img/r3gamersHome.png"/>
            <div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
                <h2 class="brighten">Contact</h2>
            </div>
         </a> 
      </div>
  </div>      

<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
  $(document).foundation();
</script>

https://zurb.com/university/lessons/how-to-bridge-rows-in-foundation

Foundation Grid 将小面板放在大面板之前

Foundation Grid putting small panels before larger panels

html

css

responsive-design

zurb-foundation