并排对齐图像

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或float div width 1}}元素并应用inline-block

我使用display创建了example here，但我不确定您想要的输出是什么，所以它可能不正确。

Here are the specs表示{{1}}属性，包括其有效值。并here is a good article on CSS Floats