2

我想在我的网站页面的主要内容区域中添加一个图像和内容网格。我有一个基本的两列模板，我想将网格放置在大内容区域中。一切正常，但是一旦我调整为纵向大小，我就会失去 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 -->
4

2 回答 2

3

我看到以前没有人回答过这个问题。我假设您已经解决了这个问题，所以这个答案适用于其他试图找到的人

问题是container该类具有 960 像素的固定宽度，因此您不能嵌套它们。第二个问题是里面的列（你试图嵌套的）超过了列数。 请参阅“clearfix”类。顺便说一句，这是我发现的最干净的解决方案：

<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 -->
于 2014-01-29T10:26:58.433 回答
0

我第一次看到这个答案时错过的部分是 Alpha 和 Omega 之间的列仅标记为三列。因此，第一列使用 alpha，最后一列使用 omega。最初的问题不起作用，因为它们有两个 alpha 和 omega。如果您查看 css alpha 和 omega，只需在左侧（alpha）或右侧（omega）上给它们 0px 边距。

于 2014-08-26T20:01:29.357 回答