異なる高さの要素の周囲に境界線を作成する

Question

私は、react-photo-album を使用して、自分の Web サイトにフォト アルバムを作成しています。

私は、下部の写真の周囲に CSS 境界線を設定できるかどうか疑問に思っていましたが、高さの違いを考慮して側面に従うことはできますか?

現在の内容:

次のようなことを想像しています。

react-photo-album--column クラスの :last-child を使用して取得できました。

しかし、私が何を試しても、下部の 1 枚の写真ではなく、コンテナ全体の周囲に境界線が表示されるだけです。

反対側もスタイリングしました:

リーリー

そして、コンテナの HTML はここで見ることができます。私のアイデアは、各 React-photo-album--column の最後の子をターゲットにすることですが、側面を処理する方法がわかりません。

Answer 1

フォトコンテナ div の側面と底面に枠線を配置できます。次に、これらの div に全体の背景と同じ背景色 (青) を与え、非表示にしたい境界線と重ねます。だから基本的に： ＃＃＃

コンテナ div には 2rem パディングがあります
各コンテナには、その左側のコンテナよりも高い Z インデックスがあります (重複を確実にするため)
各コンテナの背景は青色です
最初のコンテナを除き、コンテナの境界線を越えて左側に移動するために、各コンテナの左マージンは -2rem です。
• ＃＃＃＃＃＃編集：＃＃＃ もう一度考えてみると、これはコンテナが前のコンテナよりも短い場合にのみ機能します。この問題は、コンテナが前後のコンテナよりも長いか短いかをチェックする関数を JavaScript で作成することで解決できます。これに基づいて、(コンテナに適用される追加のクラスを介して) 両側に境界線を使用するかどうかを指定できます。