预期结果的屏幕截图：
我试图找到一个基于css-flex的解决方案，在一个额外的行中显示给定图层集的附加信息。（请参见所附的图片，了解设计师的好主意）。
如果点击一行中的任何图像或图层，则与图像相连的附加图层（例如，较大的图像和一些文本应出现在新行中）。此行应使用周围flex-container的全宽。
场景让它更清楚一点：
我展示了一组肖像。多亏了flexbox，它们移动得很好，适合可用空间。点击其中一个肖像会打开一个新行，其中充满与所点击肖像相关的内容，例如姓名、较大的图像等。
现在，我似乎无法让"信息层"扩展到原始div之外。
这是我目前拥有的代码：
/* Anordnung der Bildkacheln mithilfe von flexbox */
.image-grid {
display: flex;
justify-content: space-between;
flex-flow: row wrap;
align-content: stretch;
align-items: stretch;
max-width: 1000px;
}
.image-tile {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 150px;
margin: 0 12px 24px;
flex-flow: row wrap;
align-content: flex-start;
}
.image-tile img {
width: 100%; /* Anpassung der Bildgröße an den Container */
height: auto;
object-fit: cover; /* Anpassung des Bildes an die Größe des Containers */
}
/* Zusatzinformationslayer */
.image-info {
display: none; /* Standardmäßig ausgeblendet */
//position: absolute;
text-align: center;
border: 1px solid green;
}
.image-tile:hover .image-info {
display: block; /* Anzeigen bei Hover */
}<html>
<head></head>
<body>
<style>
</style>
<div class="image-grid">
<!-- Bildkachel -->
<div class="image-tile">
<img src="https://dummyimage.com/600x400/000/fff" alt="Bild 1">
<div class="image-info">
Zusatzinformationen über Bild 1</br>
Zusatzinformationen über Bild 1</br>
Zusatzinformationen über Bild 1</br>
Zusatzinformationen über Bild 1</br>
Zusatzinformationen über Bild 1</br>
</div>
</div>
<!-- Weitere Bildkacheln -->
<div class="image-tile">
<img src="https://dummyimage.com/600x400/1124d4/fff" alt="Bild 2">
<div class="image-info">
<img src="download.png" alt="Bild 2">
Zusatzinformationen über Bild 2
</div>
</div>
<div class="image-tile">
<img src="https://dummyimage.com/600x400/000/1124d4" alt="Bild 3">
<div class="image-info">
Zusatzinformationen über Bild 3
</div>
</div>
<div class="image-tile">
<img src="download.png" alt="Bild 4">
<div class="image-info">
Zusatzinformationen über Bild 4
</div>
</div>
<div class="image-tile">
<img src="download.png" alt="Bild 2">
<div class="image-info">
Zusatzinformationen über Bild 2
</div>
</div>
<div class="image-tile">
<img src="download.png" alt="Bild 3">
<div class="image-info">
Zusatzinformationen über Bild 3
</div>
</div>
<div class="image-tile">
<img src="download.png" alt="Bild 4">
<div class="image-info">
Zusatzinformationen über Bild 4
</div>
</div>
<div class="image-tile">
<img src="download.png" alt="Bild 2">
<div class="image-info">
Zusatzinformationen über Bild 2
</div>
</div>
<div class="image-tile">
<img src="download.png" alt="Bild 3">
<div class="image-info">
Zusatzinformationen über Bild 3
</div>
</div>
<div class="image-tile">
<img src="download.png" alt="Bild 4">
<div class="image-info">
Zusatzinformationen über Bild 4
</div>
</div>
<div class="image-tile">
<img src="download.png" alt="Bild 2">
<div class="image-info">
Zusatzinformationen über Bild 2
</div>
</div>
<div class="image-tile">
<img src="download.png" alt="Bild 3">
<div class="image-info">
Zusatzinformationen über Bild 3
</div>
</div>
<div class="image-tile">
<img src="download.png" alt="Bild 4">
<div class="image-info">
Zusatzinformationen über Bild 4
</div>
</div>
</div>
</body>
</html>
1条答案
按热度按时间tquggr8v1#
您可以通过调整三列中每个元素的边距来设置CSS，如下所示：
因此，您只需要根据列调整数学运算，但我建议您根据屏幕大小调整网格的大小，这里我将max-width设置为600px而不是1000px，以保持它在三列上。
这里是
:nth-child选择器的文档演示
x一个一个一个一个x一个一个二个x