2

店頭に商品を陳列しております。各製品には専用の箱があります。ボックスをグリッドに配置し、1 行に 2 つ配置します。ただし、それらはカテゴリにも分類されるため、そのカテゴリに属する​​各ボックス セットの上に全幅の見出しを付けたいと考えています。ここに私のHTMLがあります:

    <section class="product-listing">

        <h2>Category 1</h2>

        <section>first</section>
        <section>second</section>
        <section>third</section>

        <h2>Category 2</h2>

        <section>fourth</section>
        <section>fifth</section>

        <h2>Category 3</h2>

        <section>sixth</section>
        <section>seventh</section>
        <section>eighth</section>
        <section>ninth</section>
    </section>

そしてCSS：

.product-listing {
    width:410px; height:100%
    background:#000;
}
.product-listing > section {
    float:left;
    width:200px;
    margin:10px 10px 0 0;
    background:#ff0000;
}
.product-listing > section:nth-of-type(2n+2){
    margin-right:0;
}

そしてJSフィドル

ご覧のとおり、グリッドは 2 番目の h2 要素が導入されるまで正常に機能しますが、その後、最後のセットに奇数のボックスがある場合に 2n+2 が破棄されるため、崩壊します。基本的に私がする必要があるのは、各見出しの後に 2n+2 式をリセットすることです。

手っ取り早く汚い方法は、各ボックス セットを div でラップすることですが、不要なマークアップをページに導入することは避けたいと思います。

よりクリーンなソリューションはありますか？

4

1 に答える 1

0

注意: グリッド レイアウトの仕様について知りたい場合は、この回答の最後をお見逃しなく。

追加の要素を 1 つだけ (おそらく) 必要とする 1 つの方法は、要素全体をラップし、.product-listそのラッパーに明示的な幅を配置することです。.product-listそうすれば、要素のマージンを考慮して負のマージンを使用でき、section要素の数に関係なく、交互のマージン宣言について心配する必要はありません – JSBin の例はこちら

<div class="wrap">
  <section class="product-listing">

    <h2>Category 1</h2>

    <section>first</section>
    <section>second</section>
    <section>third</section>

    <h2>Category 2</h2>

    <section>fourth</section>
    <section>fifth</section>

    <h2>Category 3</h2>

    <section>sixth</section>
    <section>seventh</section>
    <section>eighth</section>
    <section>ninth</section>
  </section>
</div>

.wrap {
  width: 410px; /* put explicit width here */
}
.product-listing {
  margin: 0 -5px; /* "expand" the .product-listing section */
}
.product-listing > section {
  float:left;
  width:200px;
  margin:10px 5px 0; /* only put equal horizontal margin on items */
  background:#ff0000;
}
.product-listing > h2 {
  clear: both;
  margin-left: 5px; /* add side margins here too */
  margin-right: 5px;
}

追加のラッパーが必要になるのは、要素ボックスに明示的な幅がある場合に、要素ボックスを水平方向の両方に展開しない負のマージン (マージン モデルの奇妙なトリック) です。

それがうまくいかない場合、退屈な答えはおそらく、sectionアイテムの各コレクションの周りに追加のラッパーを追加してもそれほど悪くはないということです。これにより、CSS がより柔軟になり、HTML の消費者にとってはほとんど問題になりません。結局のところ、各カテゴリの下には多数の項目があります。各コレクションを aulまたは少なくとも a にしない理由はありませんdiv(リストのセマンティクスが不適切だと思われる場合)。

最後に、追加の要素と Grid Layout Module 仕様を使用せずにこれを行うことができますが、サポートはまだ実験段階です。この質問は でタグ付けされcss-gridsているため、今後の訪問者のためにその解決策をここに含めます。

.product-listing {
  display: grid;
  grid-template-columns: 1fr 1fr; /* equal width columns */
  grid-column-gap: 10px;
}
.product-listing h2 {
  grid-column: span 2;
}

Grid 仕様に組み込まれている自動レイアウト アルゴリズムが残りの処理を行います。上記の例を Chrome Canary で試してみてください (2015 年 10 月 – すぐに他の場所でも: WebKit Nightlies と Firefox は Grid の実装にそれほど遅れをとっていません)。JSBin の例はこちら。

于 2015-10-18T16:21:25.560 に答える