我想在网站主页的主要内容区域添加图片和内容网格。 我有一个基本的两列模板,我想将网格放在大内容区域。一切正常,但只要我调整到肖像,我就会在div之间放松所有边距。我不太确定在骨架中对这些项目进行分组的正确方法是什么。我是否需要为每一行结束我的容器?非常感谢任何帮助或建议。
<div class="container">
<div class="four columns"></div>
<div class="twelve columns">
<!-- grid goes here -->
<div class="container">
<div class="six columns alpha"></div>
<div class="six columns omega"></div>
<div class="six columns alpha"></div>
<div class="six columns omega"></div>
</div>
</div><!-- end twelve columns>
</div><!-- end container -->
答案 0 :(得分:3)
我以前没有人回答这个问题。我假设你已经解决了这个问题,所以这个答案适合其他试图找到的人
问题是container
类的固定宽度为960像素,因此您无法嵌套它们。第二个问题是内部(您尝试嵌套)中的列超出了列数。 See the 'clearfix' class。这是我发现的最干净的解决方案:
<div class="container">
<div class="four columns">four columns</div>
<div class="twelve columns">
<div class="sixteen columns clearfix">
<div class="three columns alpha"> first</div>
<div class="three columns">second</div>
<div class="three columns">third</div>
<div class="three columns omega">fourth</div>
</div><!-- end clearfix -->
</div><!-- end twelve columns>
</div><!-- end container -->
答案 1 :(得分:0)
我第一次看到这个答案时错过的部分是Alpha和Omega之间的列只标记为三列。所以对于第一列使用alpha和最后一列使用omega。最初的问题不起作用,因为他们有两个alpha和omegas。如果你看一下css alpha和omega,只需在左(alpha)或右(omega)上给它们0px的边距。