使用代码点渲染轮廓图标，而不是从 Material Design Google Fonts 中填充

Question

vespino

Asked: 2025-04-09 14:17:16 +0800 CST2025-04-09 14:17:16 +0800 CST 2025-04-09 14:17:16 +0800 CST

图像网格上的最后一行

772

我正在使用以下代码来创建相册（在 WordPress 中，但对于本示例来说，这无关紧要）：

结果是这样的：

我希望最后一行的图片始终占据该行。所以，当只有一张图片时，将其宽度设置为 100%，高度设置为更大；当有两张图片时，将其宽度设置为 50%，高度设置为更大。

每个页面的图片数量都不一样。有什么建议吗？

.gallery {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 8px;
}

.gallery>.img {
  width: 100% !important;
  position: relative;
  padding-bottom: 75%;
}

.gallery img {
  object-fit: cover;
  object-position: 50%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

<div class="gallery">
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
</div>

3 个回答

Voted

G-Cyrillus · Answer 1 · 2025-04-09T17:42:05+08:00

从您的代码和 Temani Afif 的解释来看，您必须从六列网格布局开始，因此元素可以跨越三分之一行、一半行或整整一行。

下面的代码片段使用了您之前使用代码提出的相同方法。CSS 适用于.gallery带有 X 的容器的未知数量的子元素div.img。

我也切换了一些 CSS 规则：grid而不是absolute，aspect-ratio而是padding-bottom。您可以保留自己的尺寸和位置，这仅供参考。

下面是一个从 6 个元素减至 1 个元素的示例代码片段。网格中最后一个元素的位置通过https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#tree-structural_pseudo-classes和 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators#subsequent-sibling_combinator进行过滤。

.gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* mind this one */
  gap: 8px;
}
.gallery > .img {
  display: grid;
  aspect-ratio: 3/2;
  grid-column: span 2;/* a third of 6 columns */
}
.gallery img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}


/********************************************/
/* selectors to filter position in the flow */
/********************************************/
.gallery > .img:last-child:nth-child(3n + 1) /* standing alone on a row */
{
  grid-column: span 6; /* 100 % of 6 columns */
}
.gallery > .img:nth-last-child(2):first-child,/* first of a serie of only 2 first row */
.gallery > .img:nth-last-child(2):first-child ~ .img,/* last one of a serie of only 2 first row */
.gallery > .img:nth-last-child(3):nth-child(3n - 3) ~ .img /* only 2 on the last -row */
{
  grid-column: span 3; /* 50% of 6 columns */
}
/********************************************/
/******** end filtering position ************/
/********************************************/


/* below CSS is only for the demo purpose, there's no need to mind it */
/* demo */
body {
  max-width: 400px;
  margin: auto;
  display: grid;
  gap: 1.6em;
  padding:1.2em;
}
.gallery {
  border: solid red 1px;
  counter-reset : gal;
}
.img {
  counter-increment:gal
}
.gallery::after {
  content:counter(gal) ' element(s)';
position:absolute;
  translate:-1ch -1.2em;
  color:green;
  font-weight:bolder;
}
/* EO demo */

<div class="gallery">
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
</div>
<div class="gallery">
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
</div>
<div class="gallery">
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
</div>
<div class="gallery">
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
</div>
<div class="gallery">
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
</div>
<div class="gallery">
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
</div>

Temani Afif · Answer 2 · 2025-04-09T15:40:50+08:00

您可以依靠:nth-child特定图像来定位

.container {
  display: grid;
  grid-template-columns: repeat(6,1fr); /* 6 columns and not 3 */
  gap: 5px;
  border: 2px solid red;
  margin: 10px;
}
.container img {
  width: 100%;
  grid-column: span 2; /* span 2 cells to get a 3-column layout */
}

/* if one image is alone in the last row */
.container img:nth-child(3n + 1):nth-last-child(1) {
  grid-column: span 6;
}
/* if two images are in the last row */
.container img:nth-child(3n + 2):nth-last-child(1),
.container img:nth-child(3n + 1):nth-last-child(2){
  grid-column: span 3;
}

<div class="container">
 <img src="https://picsum.photos/id/1/400/200">
 <img src="https://picsum.photos/id/1/400/200">
 <img src="https://picsum.photos/id/1/400/200">
 <img src="https://picsum.photos/id/1/400/200">
</div>
<div class="container">
 <img src="https://picsum.photos/id/1/400/200">
 <img src="https://picsum.photos/id/1/400/200">
 <img src="https://picsum.photos/id/1/400/200">
 <img src="https://picsum.photos/id/1/400/200">
 <img src="https://picsum.photos/id/1/400/200">
</div>
<div class="container">
 <img src="https://picsum.photos/id/1/400/200">
 <img src="https://picsum.photos/id/1/400/200">
 <img src="https://picsum.photos/id/1/400/200">
 <img src="https://picsum.photos/id/1/400/200">
 <img src="https://picsum.photos/id/1/400/200">
 <img src="https://picsum.photos/id/1/400/200">
</div>

kartik kukadiya · Answer 3 · 2025-04-09T14:30:13+08:00

<?php
$totalImages = 7; // change this as needed
$columns = 3; // number of columns in the grid
$fullRows = floor($totalImages / $columns);
$remaining = $totalImages % $columns;
?>
<html>
    <head>
        <style>
            .gallery {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 8px;
            }
            .gallery > .img {
                width: 100%;
                position: relative;
                padding-bottom: 75%;
            }
            .gallery img {
                object-fit: cover;
                object-position: 50%;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                height: 100%;
                width: 100%;
            }

            /* Special handling for last row */
            .last-row-1 {
                grid-column: span 3;
                padding-bottom: 50%; /* taller image */
            }
            .last-row-2 {
                grid-column: span 2;
                padding-bottom: 60%;
            }
            .last-row-2 + .last-row-2 {
                grid-column: span 1;
                padding-bottom: 60%;
            }
        </style>
    </head>
    <body>
        <div class="gallery">
            <?php for($i=0; $i<$totalImages; $i++): ?>
                <?php
                    $class = '';
                    if ($i >= $fullRows * $columns) {
                        // This image is in the last (incomplete) row
                        if ($remaining == 1) {
                            $class = 'last-row-1';
                        } elseif ($remaining == 2) {
                            $class = 'last-row-2';
                        }
                    }
                ?>
                <div class="img <?= $class ?>">
                    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
                </div>
            <?php endfor; ?>
        </div>
    </body>
</html>

工作原理

网格有 3 列。

PHP 逻辑计算出最后一行有多少个图像（$remaining）。

基于此，我们为最后一行图像分配一个自定义类。

在 CSS 中，我们使用 grid-column: span X 使最后一行图像跨越整行（对于 1 个图像）或一半（对于 2 个图像）。

我们还调整了 padding-bottom，使它们更高，以达到视觉平衡。

图像网格上的最后一行

重新格式化数字，在固定位置插入分隔符

为什么 C++20 概念会导致循环约束错误，而老式的 SFINAE 不会？

VScode 自动卸载扩展的问题（Material 主题）

Vue 3：创建时出错“预期标识符但发现‘导入’”[重复]

具有指定基础类型但没有枚举器的“枚举类”的用途是什么？

如何修复未手动导入的模块的 MODULE_NOT_FOUND 错误？

`(表达式，左值) = 右值` 在 C 或 C++ 中是有效的赋值吗？为什么有些编译器会接受/拒绝它？

在 C++ 中，一个不执行任何操作的空程序需要 204KB 的堆，但在 C 中则不需要

PowerBI 目前与 BigQuery 不兼容：Simba 驱动程序与 Windows 更新有关

AdMob：MobileAds.initialize() - 对于某些设备，“java.lang.Integer 无法转换为 java.lang.String”

图像网格上的最后一行

3 个回答

相关问题