主页 / 问题 / 722759
Accepted
Мистер Фикс
Asked:2020-09-25 13:34:57 +0000 UTC2020-09-25 13:34:57 +0000 UTC

是否可以使用 css 制作手风琴图像？

  • 772

介绍性的。有一个固定大小的块。您需要在块中放置不同数量的相同大小的图像。如果图像很少，并且它们被放置在一个块中，那么它们应该彼此跟随（就像在常规的内联块中一样）。

但如果更多，那么它们应该均匀地相互碰撞，就像压实一样（折叠成一堆，像卡片一样），并保持它们原来的大小。

是否可以仅使用 css 来做到这一点？

当一切都合适内联块时的示例。

当空间不足时一个例子当没有足够的空间，有必要强加。

css

1 个回答

  1. Best Answer

    如果我正确理解了这个问题，那么，例如：

    .gallery {
    display: flex;
}
.gallery > *:not(:last-child) {
    overflow: hidden;
}
.gallery img {
    width: 100px;
}
    <div class="gallery">
    <div><img src="https://i.pinimg.com/736x/a3/4a/42/a34a424444743d1f982dd4557654c2b5--the-mountains-are-calling-idaho.jpg"></div>
    <div><img src="https://i.pinimg.com/736x/a3/4a/42/a34a424444743d1f982dd4557654c2b5--the-mountains-are-calling-idaho.jpg"></div>
    <div><img src="https://i.pinimg.com/736x/a3/4a/42/a34a424444743d1f982dd4557654c2b5--the-mountains-are-calling-idaho.jpg"></div>
    <div><img src="https://i.pinimg.com/736x/a3/4a/42/a34a424444743d1f982dd4557654c2b5--the-mountains-are-calling-idaho.jpg"></div>
    <div><img src="https://i.pinimg.com/736x/a3/4a/42/a34a424444743d1f982dd4557654c2b5--the-mountains-are-calling-idaho.jpg"></div>
    <div><img src="https://i.pinimg.com/736x/a3/4a/42/a34a424444743d1f982dd4557654c2b5--the-mountains-are-calling-idaho.jpg"></div>
    <div><img src="https://i.pinimg.com/736x/a3/4a/42/a34a424444743d1f982dd4557654c2b5--the-mountains-are-calling-idaho.jpg"></div>
    <div><img src="https://i.pinimg.com/736x/a3/4a/42/a34a424444743d1f982dd4557654c2b5--the-mountains-are-calling-idaho.jpg"></div>
</div>

    • 3

相关问题