html - 并排对齐图像

Question

如何像css sprite一样并排对齐图像

 <style>
.a, .mail-green, .star{ display: block; background: url('http://css.spritegen.com//uploads/ka3dublic7f3p1363fcj1lpei1.png') no-repeat; }
.a { background-position: -0px -0px; width: 103px; height: 30px; }
.mail-green { background-position: -0px -30px; width: 159px; height: 30px; }
.star { background-position: -0px -60px; width: 198px; height: 28px; }
</style>
<div class="a"/>
<div class="main-green"/>
<div class="star"/>

Answer 1

您的 HTML 无效...

<div class="a"/>

应该

<div class="a"></div>

并且当block元素占据一行时，它们不会全部出现在彼此旁边....您应该考虑使用inline-block或者可能是floatingdiv元素并应用width

我在这里创建了一个示例，inline-block但我不确定你想要的输出是什么，所以它可能不正确。

以下是该display属性的规格，包括其有效值。这是一篇关于 CSS Floats 的好文章