Question

在过去的几天里，我一直在挑选我的大脑，并认为我会围成一圈。

我正在尝试将3张图片并排对齐，以便在浏览器窗口中展开，中间没有空格。

我设法将它们包含在1 div中，在css中使用'width：33.3％'，但是，我需要在每个图像上悬停显示单独的文本，它看起来好像是唯一的方式可能的是将每个图像放在自己的div中。

现在每张图片都在自己的div中，我遇到了困难，似乎无法解决这个问题......

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

#slide2{
width: 100%;
}

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

#selector1{
}



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

如上所述，我可以使用宽度：33.1％用于选择器1，选择器1，选择器1的css但是我需要为每个div执行此操作，这样我可以在用鼠标悬停时向每个元素显示单独的文本。 / p>

Answer 1

大声笑，请查看您当前的图片http://juiceyclub.webstarts.com/uploads/600px-Ski_trail_rating_symbol-blue_square_svg.png您的图片周围有空白区域！

我使用了不同的图片并略微更改了css。看看这个小提琴https://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图像，并排，响应

1 个答案: