<分区>
我正在使用模板制作网站，但我不太擅长 css。但是我有 3 张图像，我想保持在同一行中，具有悬停效果并适合不同分辨率的屏幕。
我在互联网上找到了一些我想要的东西，但我从来没有真正能够将它们组合在一起以获得这个结果。
据我所知，悬停效果在移动设备上不起作用，所以我认为我应该使用 2 个 css。一种用于移动设备，一种用于计算机和平板电脑。就像分辨率 <300 时没有悬停。否则悬停。
如有错误请指正。图片没有其他格式，代码是<img src=""> .
最佳答案
我不认为你会想要不同的样式表，因为你应该能够在一个很好的响应式单个 CSS 文件中做到这一点。
这应该可以帮助您入门。显然你会想要添加 classes在您的适当网站 class='inline-image' 或类似网站上添加这些内容。
HTML
<div>
<img src='http://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg' />
<img src='http://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg' />
<img src='http://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg' />
</div>
样式表
div {
/* to keep all the images on the one line*/
white-space: nowrap;
}
img {
background-color: #ffffff;
padding: 10px;
}
img:hover {
background-color: #000000;
}
JSFiddle: http://jsfiddle.net/CVSvh/
关于html - 如何让3张图片保持在同一行响应和悬停效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22612524/