div 中的 3x 图片，并排，响应式

Question

在过去的几天里，我一直在思考这个问题，认为我在兜圈子。

我正在尝试并排对齐 3 张图片，以在浏览器中拉伸 window，中间没有空格。

我设法将它们包含在 1 div 中，在 css 中使用 'width: 33.3%'，但是，我需要在 div 中显示相同的文本悬停在每张图片上，看起来唯一可能的方法就是让每张图片都在自己的 div.

现在每个图像都在自己的 div 中，我运行遇到了困难，似乎无法破解这个...

如果有人可以看一下我的代码，并为我指明正确的方向，那将是一个巨大的帮助 - https://jsfiddle.net/j15288xj/

#slide2{
width: 100%;
}

.imgContainer{
float:left;
width: 33.3%;
}

#selector1{
}



#selector1:hover { 
-webkit-filter: brightness(25%);
}

如前所述，我可以在 css 中为 selector1、selector1、selector1 使用 width: 33.3% 来执行此操作，但我需要为每个 div 执行此操作，以便我可以显示在 div用鼠标悬停在每个元素上时的相同文本。

Answer 1

大声笑，看看你当前的图像http://juiceyclub.webstarts.com/uploads/600px-Ski_trail_rating_symbol-blue_square_svg.png你的图像周围有白色space！

我使用了不同的图像并稍微更改了您的css。看看这个fiddlehttps://jsfiddle.net/DIRTY_SMITH/j15288xj/1/

img{width: 100%;}
#slide2{
    max-width: 100%;
}

.imgContainer{
    float:left;
    width: 33.3%;
}

#selector1{
}



#selector1:hover { 
    -webkit-filter: brightness(25%);
} 
#selector2{
}



#selector2:hover { 
    -webkit-filter: brightness(25%);
} 
#selector3{
}



#selector3:hover { 
    -webkit-filter: brightness(25%);
}

div 中的 3x 图片，并排，响应式

3x images within divs, side by side, responsive

html

css

position

image