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 自动为每个 child 添加一定数量的填充，问题还在于我不知道是否可以知道何时该更改行并在顶部添加填充。

我知道使用 bootstrap 和类似的东西会更容易和高效但不幸的是我不能使用任何外部库，如果有人知道如何使用 css 我将不胜感激。

Answer 1

如果您知道要有 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>

Answer 2

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

然后如您的问题中所述，当您需要在 'stacked' 项目的顶部添加填充时，您可以使用 CSS 到 select 除第一个项目之外的所有项目3、给他们一个padding。

这是它如何工作的一个例子。

.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>

CSS 更改 children 元素的填充

CSS change padding of children element

html

css

multiple-columns