尝试使用奇点gs让div在网格中并排显示

Question

尝试使用奇点gs让div在网格中并排显示

Joe*_*lin 4 drupal-theming singularitygs

我刚刚开始使用Drupal,Omega 4主题进入响应式设计技术,并希望使用奇点网格系统.我不太了解CSS(基本原则是,微妙的没有),而SASS似乎是一种很好的方式来逃避一些更神秘的功能(有点像jQuery帮助你避免Javscript).由于我真的是初学者,我想我会尽可能简单地从虚拟页面开始.那么,这是HTML:

<html>
  <head>
    <title>Singularity HTML Demo</title>
    <link rel="stylesheet" href="stylesheets/test-grid_1.css">
  </head>
  <body>
    <div id="page">
        <h1>Page tests_1</h1>
        <div id="foo">
            <h2>Foo</h2>
            <p><p>Aliquam nulla metus, laoreet non felis ut, commodo laoreet nulla. </p></p>
        </div>
        <div id="bar">
            <h2>Bar</h2>
            <p>Morbi volutpat justo ante, et laoreet est porttitor id. Nullam rhoncus ipsum leo, sed tincidunt ante consequat in.</p>
            <p>Quisque porttitor tincidunt hendrerit. Nulla et urna nisi. Fusce vulputate aliquet posuere. Cras tempor ante vel turpis scelerisque mollis. In bibendum augue in tincidunt vulputate. Donec accumsan sapien et molestie sodales. Maecenas ut arcu et arcu congue rhoncus. Suspendisse potenti. Nulla vehicula est ut ante semper lobortis. Maecenas sit amet porta mi, nec mattis dui. Curabitur tempus, magna a volutpat auctor, tellus diam pretium sapien, a accumsan augue lectus et est. Quisque sollicitudin metus tincidunt massa fermentum; non varius libero bibendum.</p>
        </div>
        <div id="baz">
            <h2>Baz</h2>
            <div>
                <p>Baz</p>
                <p>Vestibulum quis tristique arcu. Cras nec est aliquet, vehicula dolor sed, fermentum eros. Maecenas et commodo diam. Aenean egestas nulla a dolor aliquet pellentesque. Nunc enim tellus, sagittis sit amet ipsum nec, bibendum dictum nisl. Nam sollicitudin quis orci sed consequat. Nam et imperdiet ipsum, aliquam cursus nulla. Morbi erat magna, rhoncus vel velit vel, sollicitudin imperdiet orci. Quisque posuere at leo in pellentesque. Vestibulum ornare nulla odio, id mollis lorem blandit eget. Donec est sem, adipiscing eu ligula at, blandit lobortis magna. Nam tempus, risus vitae lacinia consectetur, leo orci fringilla arcu, facilisis blandit metus leo eget eros. Donec pellentesque est eget nulla ultricies, nec placerat risus sagittis. Nulla elementum metus nisi, eget sagittis risus commodo vitae. Pellentesque imperdiet porta vestibulum!</p>
            </div>
        </div>
        <div id="qux"><p>Qux</p></div>
        <div id="waldo"><p>Waldo</p></div>
        <div id="garfield"><p>Garfield</p></div>
        <div id="dilbert"><p>Dilbert</p></div>
    </div>

  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

我做了一个sass样式表,它开始只显示一个列中的所有div,一个在另一个下面,这很有效(并不困难!).我想张贴一张图片来展示我的意思,但显然我做不到!

然后,我尝试添加断点并尝试修改sass代码,使其显示在2列网格上,每个div交替显示在左侧和右侧.这是我使用奇点的sass代码:

@import "singularitygs";
$include-border-box: true;

$break: 500px;
$break2: 800px;
$break3: 1200px;
$include-clearfix: true;

$grids: add-grid(1);
$grids: add-grid(2 at $break);
$grids: add-grid(2 8 2 1 at $break2);
$grids: add-grid(12 at $break3);
$gutters: add-gutter(1/6);

body {
  margin: 0;
  padding: 0;
  @include background-grid;
}

#foo {
    background-color: red;
    color: yellow;
    @include grid-span(1, 1);
    @include breakpoint($break) {
        @include grid-span(1, 1);
    }

}

#bar {
    background-color: green;
    color: yellow;
    @include grid-span(1, 1);
    @include breakpoint($break) {
        @include grid-span(1, 2);
    }
}

#baz {
    background-color: purple;
    color: whitesmoke;
    @include grid-span(1, 1);
    @include breakpoint($break) {
        @include grid-span(1, 1);
    }
}

#qux {
  background: yellow;  
    @include grid-span(1, 1);
    @include breakpoint($break) {
        @include grid-span(1, 2);
    }
}

#waldo {
  background: blue;
    color: whitesmoke;
    @include grid-span(1, 1);
    @include breakpoint($break) {
        @include grid-span(1, 1);
    }
}

#garfield {
  background: orange;
    @include grid-span(1, 1);
    @include breakpoint($break) {
        @include grid-span(1, 2);
    }
}

#dilbert {
  background: cyan;
    @include grid-span(1, 1);
    @include breakpoint($break) {
        @include grid-span(2, 1);
    }
}

Run Code Online (Sandbox Code Playgroud)

当断点开始时,Waldo Garfield和Qux都一直向上移动到显示器的顶部--Foo已经完全看不见并被覆盖.我通过摆弄"清晰:左/右/右"以获得接近我想要的东西来管理,但它是无望的经验,我很确定不稳健.我当然肯定会遗漏一些东西,但如果有人能告诉我什么,我将非常感激!

Answer 1

And*_*aus 5

当您使用grid-span没有额外参数时,它使用隔离输出样式跨越列.此样式使所有列显示在同一行上.

您有两种选择:

对于应出现在下一行中的每个元素,您必须告诉该元素:clear: both;.这种技术称为清除.
切换到Float输出样式,自动为您应用清除.您可以通过以下三种方式中的任何一种来实现:
- 设置$output: 'float'; 全局变量 ;
- 提供$output-style 参数的grid-span混入:
  @include grid-span(1, 1, $output-style: 'float');.
- 使用快捷键mixin : @include float-span(1, 1);.

另外,请考虑以下事项:

您无需将跨度应用于默认移动视图的列.默认情况下,每列都已100%宽.
考虑通过使用不同的部分文件或简单地在装饰样式上方/下方编写布局样式来分隔样式表中的装饰和布局.
要应用交替样式,可以使用nth-child伪选择器.如果您需要旧的IE支持,请使用Selectivizr 1.0.3b和Respond polyfills.

这是我将如何做到这一点.演示:http://sassbin.com/gist/7238506/
我已经将您的HTML和SCSS转换为HAML和SASS,因为它们非常易读并且没有视觉噪音.我还删除了未使用的网格和断点.

$include-border-box: true

$break: 500px
$grids: 2

+breakpoint($break)
  #page > div
    &:nth-child(2n)
      +float-span(1,1)

    &:nth-child(2n+1)
      +float-span(1,2)

    &:last-child
      +float-span(2,1)

Run Code Online (Sandbox Code Playgroud)

注意掌握柱子如何对齐变得容易多了!

UPD 2013-10-31

我真的希望Baz向上移动所以它直接在Foo下启动,同样Garfield向上移动所以它直接在Qux下启动.但这有可能吗？

如果列高是动态的,那么你就无法优雅地做到这一点.

在这种情况下,我会将奇数段落放入一列,甚至将段落放入另一列,并跨越这两列.这将在桌面上生成所需的订单,但会改变移动设备上的订单.

如果您真的需要在移动设备和桌面设备上都有所描述的顺序,那么请考虑修复段落高度或使用JS重新排序窗口调整大小的段落.

UPD 2013-11-01

相关问题:https://github.com/Team-Sass/Singularity/issues/143#issuecomment-27547135

归档时间：	12 年前
查看次数：	1593 次
最近记录：	12 年前