0

私はウェブサイトの再設計のために禅グリッドを試しています。<div>すべてを余分に入れたり、レイアウト関連のクラス名をタグに追加したりすることなく、グリッドベースのレスポンシブデザインを作成する一般的な機能が気に入っています。私はとにかくSASS / Compassを使用しているので、zen-gridsは当然の選択です。しかし、次の「フローティングリストアイテム」効果を最もよく達成する方法を理解するのに苦労しています（たとえば、Webストアの一般的な製品グリッドの場合）。

<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-gridを使用して、3つのグリッド列を並べてカバーする4つのリストアイテムを1つの行に配置するにはどうすればよいですか？私が自分で見ている唯一の可能性は、4つの異なるCSS:nth-child疑似クラスとを使用すること@include zen-grid-item(3, [start column here]);です。これにより、9未満のすべてのInternet Explorerバージョンが除外され、その疑似クラスの実装が不足します。

誰かがこれを行う方法を知っていますか？

4

4 に答える 4

3

切り替えたくない人のために、次のミックスインを使用してこれを実現できました。

@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 を扱ったことはありませんが、グリッド フレームワークには通常、margin-right を持たない最後のクラスがあります。このようにして、そのクラスを構造内の 4 つの要素ごとに適用できます。

CSS フレームワークを使用すると、さらに簡単になります。例として、コンパス + ブループリント グリッドを使用すると、次のようになります。

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

html5shiv、Selectivizr、Respond.jsポリフィルの組み合わせを使用して、IE 7 および 8 で CSS3 セレクターとメディア クエリのサポートを有効にします。

ポリフィルのバージョンと順序が重要であることに注意してください。この回答に従ってください: https://stackoverflow.com/a/16732064/901944

于 2013-08-11T08:33:26.990 に答える
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);
        }
    }
}

index.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 に答える