Question

我使用模板制作网站，我不是很擅长CSS。但是我有3个图像，我想留在同一行，有悬停效果，适合不同分辨率的屏幕。

我在互联网上找到了我想要的东西，但我从来没有真正能够将它们放在一起以获得这个结果。

据我所知，悬停效果不适用于移动设备，所以我认为我应该使用2 css。一个用于移动，一个用于计算机和平板电脑。像分辨率<300时没有悬停的东西。否则请盘旋。

如果我错了，请纠正我。图像没有其他格式，代码为<img src="">。

Answer 1

我不认为您会想要使用不同的样式表，因为您应该能够在一个很好的响应式单个CSS文件中执行此操作。

这应该让你开始。显然，您希望在适当的网站class='inline-image'上添加classes或类似内容。

<强> 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/

如何使3个图像保持在同一行响应和悬停效果

1 个答案: