CSS更改children元素的填充

Question

这是HTML

<div style="position: relative; height: 350px;">
<div style="position: absolute; left: 0%; top: 0px;">
<img width="450" height="450" src="image.jpg" class="archia-folio-thumbnail" loading="lazy"></a>
</div>
</div>
<div style="position: relative; height: 350px;">
<div style="position: absolute; left: 0%; top: 0px;">
<img width="450" height="450" src="image2.jpg" class="archia-folio-thumbnail" loading="lazy"></a>
</div>
</div>
<div style="position: relative; height: 350px;">
<div style="position: absolute; left: 0%; top: 0px;">
<img width="450" height="450" src="image3.jpg" class="archia-folio-thumbnail" loading="lazy"></a>
</div>
</div>
<div style="position: relative; height: 350px;">
<div style="position: absolute; left: 0%; top: 0px;">
<img width="450" height="450" src="image4.jpg" class="archia-folio-thumbnail" loading="lazy"></a>
</div>
</div>
<div style="position: relative; height: 350px;">
<div style="position: absolute; left: 0%; top: 0px;">
<img width="450" height="450" src="image5.jpg" class="archia-folio-thumbnail" loading="lazy"></a>
</div>
</div>

我想让所有这些图像都在多行3列中，所以我想我可以添加一些css，为每个孩子自动添加一定数量的填充，问题还在于，我不知道是否可以知道何时可以更改行并在顶部添加填充。

我知道使用bootstrap和类似的程序会更容易、更高效，但不幸的是，我不能使用任何外部库，如果有人知道如何使用css来做到这一点，我将不胜感激。

Answer 1

我首先建议添加一个父容器。使用display:flex水平对齐子项然后允许它们在组合宽度达到100%时使用flex wrap:wrap堆叠

然后，正如您的问题中所提到的，当您需要在"堆叠"项目的顶部添加填充时，您可以使用CSS选择除前3个项目之外的所有项目，并为它们添加填充。

下面是一个如何工作的例子。

.items{
display: flex; 
flex-wrap: wrap; 
}
.item{
width: calc(100%/3); /* approx 33% */
background: grey;
}
.item:not(:nth-of-type(-n+3)){ /* select every .item - but not the first 3 */
padding-top: 10px;
}
.item > div{
padding: 10px;
background: pink;
}

<div class="items">
<div class="item">
<div>Image</div>
</div>
<div class="item">
<div>Image</div>
</div>
<div class="item">
<div>Image</div>
</div>
<div class="item">
<div>Image</div>
</div>
<div class="item">
<div>Image</div>
</div>
</div>

Answer 2

如果您知道要有3列，那么简单的解决方案是设置display: inline-block; width: calc(100% / 3);

.block {
position: relative; 
height: 350px;
/* NEW: */
display: inline-block; 
width: calc(100% / 3);
}
.thumb {
position: absolute; 
left: 0%; 
top: 0px;
}
.thumb .archia-folio-thumbnail {
width: 450px;
height: 450px;
}

<div class="block">
<div class="thumb">
<img src="image.jpg" class="archia-folio-thumbnail" loading="lazy"></a>
</div>
</div>
<div class="block">
<div class="thumb">
<img src="image2.jpg" class="archia-folio-thumbnail" loading="lazy"></a>
</div>
</div>
<div class="block">
<div class="thumb">
<img src="image3.jpg" class="archia-folio-thumbnail" loading="lazy"></a>
</div>
</div>
<div class="block">
<div class="thumb">
<img src="image4.jpg" class="archia-folio-thumbnail" loading="lazy"></a>
</div>
</div>
<div class="block">
<div class="thumb">
<img src="image5.jpg" class="archia-folio-thumbnail" loading="lazy"></a>
</div>
</div>

.galery {
display: grid;
grid-template-columns: 33% 33% 33%;
}
.block {
margin: 5px; 
display: inline-block; 
background: red;
}
.thumb {
left: 0%; 
top: 0px;
padding:5px;
background: blue;
}
.thumb .archia-folio-thumbnail {
max-width: 100%;
height: 100%;
max-height: 350px;
}

<div class="galery">
<div class="block">
<div class="thumb">
<img src="https://picsum.photos/350/450" class="archia-folio-thumbnail" loading="lazy">
</div>
</div>
<div class="block">
<div class="thumb">
<img src="https://picsum.photos/450/450" class="archia-folio-thumbnail" loading="lazy">
</div>
</div>
<div class="block">
<div class="thumb">
<img src="https://picsum.photos/450/350" class="archia-folio-thumbnail" loading="lazy">
</div>
</div>
<div class="block">
<div class="thumb">
<img src="https://picsum.photos/350/450" class="archia-folio-thumbnail" loading="lazy">
</div>
</div>
<div class="block">
<div class="thumb">
<img src="https://picsum.photos/350/450" class="archia-folio-thumbnail" loading="lazy">
</div>
</div>
</div>