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，其中包含一个带有文本的范围，以显示在下面（为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>

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

1 个答案: