个人中心
gpt4 book ai didi

drupal-theming - 尝试使用奇异性 gs 在网格中并排显示 div

转载 作者：行者123 更新时间：2023-12-04 23:52:53 24 4
gpt4 key购买 nike

我刚刚开始使用 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>

我做了一个 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);
    }
}

当断点启动时，Waldo Garfield 和 Qux 已经全部移动到了显示屏的顶部——Foo 已经完全不可见并被覆盖。
我通过摆弄“清晰:两者/左/右”来获得接近我想要的东西，但它是无可救药的经验性的，我很确定它不可靠。我肯定错过了一些东西，但如果有人能告诉我什么，我将不胜感激!

最佳答案

当您使用 grid-span没有额外参数，它使用 Isolation 跨越列输出风格。此样式使所有列出现在同一行上。

你有两个选择:

  • 对于应该出现在下一行的每个元素，您必须告诉该元素这样做:clear: both; .这种技术称为清除。
  • 切换到Float自动为您应用清算的输出样式。您可以通过以下三种方式中的任何一种来做到这一点:
  • 设置 $output: 'float'; global variable ;
  • 提供$output-style argument到grid-span混音:@include grid-span(1, 1, $output-style: 'float'); .
  • 使用 shortcut mixin : @include float-span(1, 1); .

    • 此外，请考虑以下事项:
  • 您不需要对默认移动 View 的列应用跨越。默认情况下，每列已经是 100% 宽。
  • 考虑通过使用不同的部分文件或简单地在装饰样式上方/下方编写布局样式来分离样式表中的装饰和布局。
  • 要应用交替样式，您可以使用 nth-child伪选择器。如果您需要旧的 IE 支持，请使用 Selectivizr 1.0.3b and 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)

    请注意，掌握列的对齐方式变得多么容易!

    更新 2013-10-31

    I would really like to have Baz move up so it starts directly under Foo, and similarly Garfield move up so it starts directly under Qux. But is this even possible?



    如果列高是动态的，那么您就无法优雅地做到这一点。

    在这种情况下，我会将奇数段放入一列，将偶数段放入另一列，并跨越这两列。这将在桌面上生成所需的订单，但在移动设备上更改订单。

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

    更新 2013-11-01

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

    关于drupal-theming - 尝试使用奇异性 gs 在网格中并排显示 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19688685/

    24 4 0
    文章推荐： visual-studio-2012 - 我应该为 .PNG 文件中的透明像素设置什么 RGB 值？
    文章推荐： google-drive-api - Google Drive File ID 在全局范围内是唯一的吗？
    文章推荐： intellij-idea - 用于切换打开的编辑器窗口的键盘快捷键
    文章推荐： active-directory - 按 CN 名称过滤的 LDAP，以
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com