0

jsfiddle の例

郡名をクリックすると、その紋章が表示されます。

必要に応じて div を追加しています。各 div の背景は、完全に機能する CSS スプライトからのものです。私が望むのは、追加された各 div を垂直方向に中央揃えにして、よりきれいに並べることです。

position: relative; top: XXpx;たとえば、各クレストごとにトップを手動で追加および修正できます.Corksmall { background-position: -25px -27px; height: 27px; width: 25px; position: relative; top: 5px;}が、それは力ずくの方法のようです。

これを行うためのよりコーダーを喜ばせる方法はありますか? ティア

4

3 に答える 3

1

この動作を実現するための簡単なトリックがあります。

#selectedCounties .sprite-smallcrests {
    /* float: left; */ /* removed. no need for, because we apply display: inline-block */
    display: inline-block;
    vertical-align: middle;
}

ライブデモ： http： //jsfiddle.net/CGcdc/4/

div各画像の高さによっては、画像がジャンプすることに気付いたかもしれません。
空の要素の前に可能な限り高い画像の高さを付けると、ジャンプを防ぐことができます。
ライブデモ：http：//jsfiddle.net/CGcdc/9/

このクロスブラウザと互換性を持たせたい場合は、ラッパーdivsをspansまたはデフォルトでインライン要素である他の要素に置き換えます。

$('#Clare, #Cork, #Limerick').click(function(){
    $('<span/>', {
        title: 'Co. '+this.id,
        'class': this.id+'small sprite-smallcrests'
    }).appendTo('#selectedCounties');
});

これで問題が解決することを願っています:)

于 2012-06-19T19:03:45.840 に答える
0

私がすることは、各画像を同じ正確な高さで保存し、画像ドキュメントに頂点を垂直に配置することです。

スプライト シートの場合、これは次のことを意味します。すべての画像に 1 つの静的な高さを設定できるように、垂直方向に十分なスペースを残してください。

説明画像。

ここに画像の説明を入力

  • 緑色の部分は紋をイメージしています。
  • 赤枠が全体像です。
  • 空白は、各 img ドキュメントに残す空のスペースを表します (または、スプライト シートのクレスト間のパディング)。
于 2012-06-18T12:19:20.263 に答える
0

私の理解では、あなたはsmallcrests..だから、これを試してみてください..以下のcssを以下のように変更してください。

#selectedCounties .sprite-smallcrests {
margin: 10px auto;
}

ここにデモがあります

于 2012-06-18T11:33:10.163 に答える