html - 在图像网格下添加内容以跨越页面长度

Question

我正在寻找有关我正在处理的图像网格的一些建议。

以此为例:https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_grid_responsive

假设我想在该 HTML 中的每个图像下面添加类似这样的内容:

<div>This is my piece of very long content that I want to display under all images in a row. It should span underneath all images.</div>

默认情况下，此内容将被隐藏，并且可以通过某些操作使其显示(例如单击特定图像)。我想要实现的是让这个 div(或它最终成为的任何东西)显示页面的长度，具体取决于页面的长度。因此，如果有 4 张图片，文本将显示在前四张图片下方。如果有两张图片(由于分辨率大小的变化)，它会显示在两张下面。这与其在 HTML 中位于其下方的图像下方显示相反。

不确定如何最好地编写它 - 有什么建议吗？

Answer 1

一种快速的方法是在图像周围使用一些额外的标记。您可以手动添加它或使用 javascript 动态构建它。

这是一个例子。我不确定这是您要寻找的效果。

我在图像周围插入了一个 div，并包含了一个带有要在下方显示的文本的 span(对其中 3 个图像执行了此操作。)

这是悬停效果的CSS。

.column div span{
    display: none;
    position: absolute;
    z-index: 99;
    left:0;
    background: #0095ff;
    color: #ffffff;
    padding:20px;
    box-sizing: border-box;
    width: 100%;
}
.column div:hover span{
    display:block;
}

添加的标记类似于:

<div>
 <img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
 <span>This is some text</span>
</div>

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial;
}

.header {
    text-align: center;
    padding: 32px;
}

.row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
    box-sizing: border-box;
}

/* Create four equal columns that sits next to each other */
.column {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
    .column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}

.column div span{
    display: none;
    position: absolute;
    z-index: 99;
    left:0;
    background: #0095ff;
    color: #ffffff;
    padding:20px;
    box-sizing: border-box;
    width: 100%;
}
.column div:hover span{
    display:block;
}

<!-- Photo Grid -->
<div class="row"> 
  <div class="column">
    <div>
    <img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
    <span>This is some text</span>
    </div>
    <div>
    <img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
    <span>Other text</span>
    </div>
    <img src="https://www.w3schools.com/w3images/falls2.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/mist.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
  </div>
  <div class="column">
    <div>
    <img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
    <span>More text</span>
    </div>
    <img src="https://www.w3schools.com/w3images/ocean.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/mountainskies.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
  </div>  
  <div class="column">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/falls2.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/mist.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/ocean.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/mountainskies.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
  </div>
</div>