Html 基础网格在小面板之前放置小面板
我正在尝试创建一个只显示（没有文本，除了标题）样式的网页 为了给这个页面最好的外观，我希望每个可点击的框都有不同的大小 这是我想要的Html 基础网格在小面板之前放置小面板,html,css,responsive-design,zurb-foundation,Html,Css,Responsive Design,Zurb Foundation,我正在尝试创建一个只显示（没有文本，除了标题）样式的网页 为了给这个页面最好的外观，我希望每个可点击的框都有不同的大小 这是我想要的 __________________________ | | 2 | | 1 |_______| | | 3 | |_________________|_______| |_4_|_5_| 8 | |_6_|_7_|_______
__________________________
| | 2 |
| 1 |_______|
| | 3 |
|_________________|_______|
|_4_|_5_| 8 |
|_6_|_7_|_________________|
|_4_|_5_|_6_|_7_|
| 8 |
|_________________|
我的代码在下面，所有的基础框架都是标准的。p>
<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>
$（document.foundation（）；
我找到了一份文件来回答我的问题。问题是我没有将包含4,5,6,7的4行部分拆分为两行。因此，我在4和5之后添加了6和7，或者在网页流的下一行，而不是在它自己的小部分中。下面添加了固定代码，以及引导我找到正确答案的网页。（本课程应包含在文档中）
$（document.foundation（）；
<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>