无语义的网格框架似乎不会创建排水沟答案

【问题标题】：Unsemantic grid framework doesn't seem to create gutters无语义的网格框架似乎不会创建排水沟
【发布时间】：2013-06-02 06:31:51
【问题描述】：

这个问题与无语义网格框架 (unsemantic.com) 有关。

这是我的html：

<!DOCTYPE html>

<html>

<head>

    <link rel="stylesheet" href="css/unsemantic-grid-responsive-no-ie7.css" />

    <style>
        div.blue {
            background-color: #00f;
        }

        div.green {
            background-color: #0f0;
        }
    </style>


</head>

<body>

    <div class="grid-container">
        <div class="grid-30 blue">
            30%
        </div>
        <div class="grid-70 green">
            70%
        </div>
    </div>


</body>

</html>

这是 unsemantinc 的 CSS 部分，用于定义关键方面：

  .grid-container:before, .clearfix:before,
  .grid-container:after,
  .clearfix:after {
    content: ".";
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
  }

  .grid-container:after, .clearfix:after {
    clear: both;
  }

  .grid-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .grid-5, .mobile-grid-5, .grid-10, .mobile-grid-10, .grid-15, .mobile-grid-15, .grid-20, .mobile-grid-20, .grid-25, .mobile-grid-25, .grid-30, .mobile-grid-30, .grid-35, .mobile-grid-35, .grid-40, .mobile-grid-40, .grid-45, .mobile-grid-45, .grid-50, .mobile-grid-50, .grid-55, .mobile-grid-55, .grid-60, .mobile-grid-60, .grid-65, .mobile-grid-65, .grid-70, .mobile-grid-70, .grid-75, .mobile-grid-75, .grid-80, .mobile-grid-80, .grid-85, .mobile-grid-85, .grid-90, .mobile-grid-90, .grid-95, .mobile-grid-95, .grid-100, .mobile-grid-100, .grid-33, .mobile-grid-33, .grid-66, .mobile-grid-66 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
  }

  .grid-parent {
    padding-left: 0;
    padding-right: 0;
  }

我使用unsemantic-grid-responsive-no-ie7.css 文件。理论上，这应该并排创建两个 div，一个占 30% 的宽度，另一个占 70% 的宽度。在它们之间，应该有一个 20px gutter 或空间，如果你愿意（根据 Unsemantic 规范）。

但是，我似乎无法找到排水沟。 div 只是粘在一起。

有什么想法吗？

【问题讨论】：

查看您提供的代码，我看不出您是如何添加排水沟的。能否添加定义装订线的相关 HTML/CSS sn-p？

标签： html css frameworks css-frameworks unsemantic-css

【解决方案1】：

装订线是作为填充而不是作为边距添加的。

容器内的 2 列（应用背景颜色）不会有可见的 20 像素间距。容器每边的内边距为 10px，每列的 content 每边的内边距为 10px。

如果你想要一个可见的排水沟，你需要嵌套一个额外的 div 或类似的。

【讨论】：

【解决方案2】：

对于基于边距的装订线，您可以使用 prefix-{width} 或 suffix-{width} 类。

<div class="grid-35 suffix-5">
 content
</div>
<div class="grid-60">
 content
</div>

应该给你两列，它们之间有 5%。

【讨论】：