CSS 精灵 - 如何对齐并做出响应？

Question

如何将图标对齐到我想要的位置？示例代码：

    <div id="details_info">
    <div class="pirmais">
        <img src="img/gtavice.png" width="100%" height="200">
    </div>

<div class="otrais">
    <h2>Grand Theft Auto: Vice City</h2>
        <p>Rockstar games <div class="popular"></div></p>
        <p><div class="s-18"></div>PEGI 18</p>
</div>

我希望热门图标位于 Rockstar 游戏旁边，但它显示在文本下方。

我用 float:left 在 PEGI 的左侧显示了 s-18 图标，但我不能在任何地方使用它。例如，对 Rockstar 游戏使用 float:right 会将图标放在右下角。

.s-18, .cilveks, .gljuk, .icon_earth, .icon_flag, .icon_mail, .icon_shield, .like, .plus, .popular, .profile_pic, .stars{
    background: url(../img/sprites.png) no-repeat;
}

.popular{
    background-position: -368px -19px ;
    width: 14px;
    height: 14px;
}

.s-18{
    background-position: -11px -10px ;
    width: 28px;
    height: 28px;
    float:left;
}
#details_info {
    max-width:100%;
    padding: 15px;
}
#details_info .pirmais {
    width: 20%;
    float: left;
    padding-right:20px;
}

#details_info .otrais{
    width: 60%; 
    float: left;
}

#details_info .otrais img{
    width: 5%; 
}

以及如何让这些精灵响应？我是第一次创建响应式的东西，对媒体查询了解不多，所以我使用某种百分比来扩展网站。

Answer 1

.popular 显示在文本下方，因为它仍然是一个块。给它 display:inline 或 display:inline-block.

其他图标也是如此，例如 .s-18 作为内联块也比浮动更好。

要使精灵响应，您需要做的是创建更高分辨率版本的精灵图像。

因此，如果您的 sprite 图片通常看起来像这样

^{（我这里没有你的精灵，所以我不得不自己滚，抱歉）}

你会做类似的事情

.icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url('http://i.stack.imgur.com/OgVDK.png') no-repeat;
  background-position: -14px 0;
}

<div class="icon"></div>

所以对于更高分辨率的图片，你只需制作一个更大版本的图形，并告诉浏览器你想以相同的尺寸显示它，在本例中为 28px × 14px，因此它会按比例缩小.
其余代码可以保持不变。

.icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url('http://i.stack.imgur.com/TN6uj.png') no-repeat; /* changed */
  background-position: -14px 0;
  background-size: 28px 14px; /* added */
}

<div class="icon"></div>

如果您看不出两个结果之间的差异，请尝试放大！

CSS 精灵 - 如何对齐并做出响应？

CSS Sprites - How to align and make responsive?

html

css

css-sprites