0

我正在尝试重新设计网站的zen-grids 。我喜欢它生成基于网格的响应式设计的一般能力，而无需将所有内容放入额外<div>的 s 并将与布局相关的类名添加到标签中。无论如何，我使用SASS / Compass，所以 zen-grids 是一个明显的选择。但是我很难弄清楚如何最好地实现以下“浮动列表项”效果（例如，对于网上商店中的典型产品网格）：

<html>
  <head>
    <style>
    ul {
      width:100%;
      list-style-type:none;
      margin:0;
      padding:0;
    }
    li {
      width:25%;
      height:10em;
      background-color: silver;
      float:left;
    }
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </body>
</html>

假设我有一个 12 列布局 ( $zen-column-count: 12;)，我如何使用 zen-grids 将四个列表项分别覆盖三个网格列并排成一行？我看到自己的唯一可能性是使用四个不同的 CSS:nth-child伪类和@include zen-grid-item(3, [start column here]);. 这排除了所有低于 9 的 Internet Explorer 版本，缺少该伪类的实现。

有人知道怎么做这个吗？

4

4 回答 4

3

对于那些不想切换的人，我可以使用以下 mixin 来完成此操作：

@include zen-nested-container(); （对于包含购物车项目的父容器）

@include zen-grid-flow-item(1, 4, true, true); （用于购物车 div）

@include zen-float(左); （浮动左边的项目以使它们保持在同一行）

示例 SCSS：

#block-views-course-dashboard-block-2 {
    @include zen-grid-item(3, 3);
    @include zen-nested-container();
    .views-row {
      @include zen-grid-flow-item(1, 4, true, true);
      @include zen-float(left);
      height: 10em;
    }
}

我将 Drupal 7 Zen Theme 与 Zen Grids 一起使用。有关zen-grid-item 和 zen-grid-flow-item 的参数的更多信息，请参阅http://zengrids.com/help/#mixins 。

于 2013-08-09T20:12:43.317 回答
1

我没有使用过 zen-grid，但是网格框架通常有一个没有边距的最后一个类。这样，您可以将该类应用于结构中的每四个元素。

如果你使用一些 CSS 框架，它可能会更容易。例如，这就是我使用 Compass + Blueprint 网格所做的事情：

ul:nth-child(4n) { @include last; }
于 2012-12-04T19:57:34.630 回答
0

莎莎魔术

我通过更改工具解决了这个问题：Tsachi Shlidor的Salsa是 Sass 的替代网格布局系统，它使以下解决方案成为:nth-child()不可能。我也增加了一点respond-to响应能力。

style.scss（用指南针编译）

@import "salsa/salsa";
$base-font-size: 100%;
$base-line-height: 1.5em;
$container-width: 100%;
$gutter-width: $base-line-height;

@import "respond-to";
$breakpoints: "wide screen" (50em),
              "narrow screen" (0em 50em);


body {
    @include container;
}
ul {
    list-style-type: none;
    padding-left: 0;
    li {
        height: 10em;
        background-color: silver;
    }
}
/* layout for narrow screens: 2 items per row */
$columns: 8;
@include respond-to('narrow screen') {
    ul {
        li {
            @include grid(4);
        }
    }
}
/* layout for wide screens: 4 items per row */
$columns: 16;
@include respond-to('wide screen') {
    ul {
        li {
            @include grid(4);
        }
    }
}

索引.html

<html>
  <head>
    <link rel="stylesheet" href="style.css"/>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </body>
</html>
于 2012-12-07T08:55:29.020 回答
0

结合使用html5shiv、Selectivizr和Respond.js polyfill，在 IE 7 和 8 中启用 CSS3 选择器和媒体查询支持。

请注意，polyfill 的版本和顺序很重要。按照这个答案：https ://stackoverflow.com/a/16732064/901944

于 2013-08-11T08:33:26.990 回答