1

これは JavaScript のトリックだと思いますが、純粋な CSS でこれを行う方法があることを教えてください。

グリッドのようなレイアウトで表示したい項目 (この場合は写真) のリストがあります。私の要件は簡単です:

  • 各アイテム間の等間隔
  • 「両端揃え」配置、つまり、行の最初の要素が左に固定され、最後の要素が右に固定されます。
  • 1 行あたりのアイテムの数は、画面の幅に基づいて変化します。

私はいくつかのことを試しましたが、それぞれにいくつかの問題があります:

  • li.item { padding-right: somepx; } li.item:nth-child { padding-right: 0px; }
    • 画面サイズが変わると、nth-child も変更する必要があります。
  • li.item { padding-left: some/2px; padding-right: some/2px; }
    • 最初と最後のアイテムは端にくっつきません。

ご覧のとおり、上記の 3 つの要件のうち 2 つしか達成できませんでした。クロスブラウザーと互換性のある優れたトリックはありますか?

ありがとう!

4

0 に答える 0