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

【问题标题】：Foundation Grid putting small panels before larger panelsFoundation Grid 将小面板放在大面板之前
【发布时间】：2015-05-11 17:58:04
【问题描述】：

我正在尝试创建一个仅视觉（没有文字，除了标题）样式的网页。

为了让这个页面看起来最好，我希望每个可点击的框都有不同的大小。

这就是我想要的。

__________________________
|                 |   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>

【问题讨论】：

标签： html css responsive-design zurb-foundation

【解决方案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

【讨论】：