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

基础网格在较大的面板之前放置小面板

1 个答案: