これは 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 つしか達成できませんでした。クロスブラウザーと互換性のある優れたトリックはありますか?
ありがとう!