CSS Sprites - 如何对齐和响应？

Question

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

    <div id="fb-root"></div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/facebookConnectPlugin.js"></script>

我想在Rockstar游戏旁边播放热门图标，但它会显示在文字下面。

我在PEGI的左边显示了s-18图标，浮动：左边但我无法在任何地方使用它。例如，使用float：对于Rockstar游戏，右边会放置图标。

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

以及如何使theese sprites响应？我第一次创建响应式的内容并且对媒体查询了解不多，所以我使用某种％来扩展网站。

Answer 1

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

对于.s-18这样的其他图标也是如此，这些图标作为内联块也比浮动更好。

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

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

^{（我这里没有你的精灵，所以我不得不自己动手，对不起）}

你做的事情

.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>

如果您没有看到两个结果之间的差异，请尝试放大！