I'm using react-photo-album to create a photo album on my website.
I was wondering if it was possible to set a CSS border around the photo at the bottom, but follow the sides to account for the different heights?
What is currently:
I'm imagining something like this:
I was able to get it using :last-child on the react-photo-album--column class:
But anything I try just results in a border around the entire container, rather than the single photo at the bottom.
I've styled the other side:
.react-photo-album { border-radius: 5px; border: 4px solid #86afe1; border-bottom: 0; padding: 3rem 2rem 2rem; }
And the HTML of the container can be viewed here, my idea is to target the last child of each React-photo-album--column, I just don't know how to handle the sides.
P粉2935505752024-03-31 00:22:29
You can place borders on the sides and bottom of the photo container div. Then give these divs the same background color as the overall background (blue) and overlap them with the border you want to hide. So basically:
edit: Thinking about it again, this only works if the container is shorter than the previous container. You can solve this problem by writing a function in javascript that checks if the container is longer or shorter than the preceding and following containers. Based on this you can use or not use borders on each side (via extra classes applied to the container).