文章/答案/技术大牛

发布

社区首页 >问答首页 >非语义网格框架似乎不会创建沟槽

问非语义网格框架似乎不会创建沟槽
EN

Stack Overflow用户

提问于 2013-06-06 17:47:26

回答 2查看 1.6K关注 0票数 1

这个问题与非语义网格框架(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或空间，如果你愿意(根据非语义的)规格。

然而，我似乎不能得到排水沟。divs只是粘在一起。

有什么想法吗？

html

css

frameworks

css-frameworks

unsemantic-css

回答 2

Stack Overflow用户

发布于 2013-07-03 00:59:27

边沟将作为填充添加，而不是作为页边距添加。

容器内有2列(应用了背景色)，不会有可见的20px间隔。容器的每边都有10px的填充，每列的content的每边都有10px的填充。

如果你想要一个可见的间隔，你需要嵌套一个额外的div或者类似的东西。

票数 3

Stack Overflow用户

发布于 2014-01-30 08:41:03

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

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

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/16958883

复制

相似问题

问非语义网格框架似乎不会创建沟槽
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问非语义网格框架似乎不会创建沟槽EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问非语义网格框架似乎不会创建沟槽
EN