0

cssスプライトのように画像を並べて配置する方法

 <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"/>
4

1 に答える 1

3

HTMLが無効です...

<div class="a"/>

する必要があります

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

また、block要素が1行を占めるため、すべてが隣り合って表示されるわけではありません....要素を使用するinline-blockか、おそらく使用して、floatdivwidth

ここではを使用して例を作成しましたinline-blockが、目的の出力が何であるかがよくわからないため、正しくない可能性があります。

有効な値を含む、displayプロパティの仕様は次のとおりです。そしてここにCSSFloatsに関する良い記事があります

于 2012-07-09T08:36:55.820 に答える