Buat sempadan di sekeliling unsur ketinggian yang berbeza

Question

Saya menggunakan react-photo-album untuk membuat album foto di tapak web saya.

Saya tertanya-tanya sama ada boleh menetapkan sempadan CSS di sekeliling foto di bahagian bawah, tetapi ikut bahagian tepi untuk mengambil kira ketinggian yang berbeza?

Apa yang ada pada masa ini:

Saya membayangkan sesuatu seperti ini:

Saya dapat mendapatkannya menggunakan :last-child pada react-photo-album--class column:

Tetapi apa sahaja yang saya cuba hanya menghasilkan sempadan di sekeliling keseluruhan bekas dan bukannya satu foto di bahagian bawah.

Saya telah menggayakan sisi lain:

.react-photo-album {
    border-radius: 5px;
    border: 4px solid #86afe1;
    border-bottom: 0;
    padding: 3rem 2rem 2rem;
}

Dan HTML bekas boleh dilihat di sini, idea saya adalah untuk menyasarkan anak terakhir setiap React-photo-album--lajur, saya hanya tidak tahu bagaimana untuk mengendalikan bahagian tepi.

Answer 1

Anda boleh meletakkan sempadan di bahagian tepi dan bawah div bekas foto. Kemudian berikan div ini warna latar belakang yang sama dengan latar belakang keseluruhan (biru) dan tindihkannya dengan sempadan yang anda ingin sembunyikan. Jadi pada asasnya:

• Div kontena anda mempunyai padding 2rem
• Setiap bekas mempunyai indeks z yang lebih tinggi daripada bekas di sebelah kirinya (untuk memastikan pertindihan)
• Setiap bekas mempunyai latar belakang biru
• Setiap bekas kecuali yang pertama mempunyai jidar kiri sebanyak -2rem untuk bergerak melepasi sempadan kontena di sebelah kirinya

Editor: Difikirkan semula, ini hanya berfungsi jika bekas lebih pendek daripada bekas sebelumnya. Anda boleh menyelesaikan masalah ini dengan menulis fungsi dalam javascript yang menyemak sama ada bekas itu lebih panjang atau lebih pendek daripada bekas sebelum dan seterusnya. Berdasarkan ini, anda boleh menggunakan atau tidak menggunakan sempadan pada setiap sisi (melalui kelas tambahan yang digunakan pada bekas).