[英]Aligning images side by side
How to align the images side by side like css sprite 如何像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"/>
Your HTML isn't valid ... 您的HTML无效...
<div class="a"/>
should be 应该
<div class="a"></div>
and as block
elements take up a single line they won't all appear next to each other .... you should consider using inline-block
or perhaps float
ing the div
elements and applying a width
并且当
block
元素占据一行时,它们不会全部并排出现.....您应该考虑使用inline-block
或float
div
元素并应用width
I have created an example here using inline-block
but am not really sure what your desired output is so it may be incorrect. 我在这里使用
inline-block
创建了一个示例,但实际上不确定您想要的输出是什么,因此可能不正确。
Here are the specs for the display
property, including its valid values. 以下是
display
属性的规范 ,包括其有效值。 And here is a good article on CSS Floats 这是一篇关于CSS Floats的好文章
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.