1

今、私はカード ゲームに取り組んでおり、今はハンド カードに関するコードを書いています。
私たちのターゲットは次のようになるはずです (IE10 での私のコードの結果です)
目標
3 つの要件があります:
1. すべてのカードが手札の領域を埋めます。
2. すべてのカードの幅は同じです。
3. カードが多すぎると、右のカードが左のカードの上に置かれます。(青い縁取りのカードが一番左で、2 番目のカードの下にあります)
そこで、表を使用することにしました。ここにコードがあります。 

<style>
    .hand {
        position: absolute; /* We need to locate it */
        display: table;
        width: 60%;
        height: 15%;
        left: 19.5%;
    }
        .hand .wrap {
            position: relative;
            display: table-cell;
            height: 100%;
        }
        .hand .card {
            position: relative;
            left: 50%;
        }
</style>
<div style="width: 400px; height:100px; position: relative"> 
<!-- Container's width and height will change with JavaScript -->
    <div class="hand">
        <div class="wrap">
            <img class="card" src=""/>
        </div>
        <div class="wrap">
            <img class="card" src=""/>
        </div>
        <!-- More cards can be added using JavaScript. -->
    </div>
</div>
<script>
    function adjust() { // Run this function when inserting new cards.
        $(".hand .card").css("margin-left", function () {
            return 0 - $(this).width() / 2 + "px";
        });
    }
</script>

さて、IE10 でのコードの結果は上記ですが、Firefox と Chrome では.handの高さが の画像の高さと同じ.cardです。
私は他の同様の質問を読んだことがありますが、テーブルの CSS プロパティが影響しないことを知っていheightます。 Firefox それらはすべて. 高さを設定するためのクロスブラウザソリューションやその他の方法はありますか? どうもありがとう！.cardposition: absolute;.card.hand

4

1 に答える 1

1

position表のセル (またはセルのように動作する要素) に適用できないため、実装は機能しません。これを可能にするには、追加のマークアップ要素が必要です。

Javascript を使用しない作業サンプルは、最新のすべてのブラウザーで動作するはずです: http://jsfiddle.net/VN3wx/

CSS

#hand {
    display:table;
    width:550px;
    height:210px;
}
.card {
    display:table-cell;
}
.card > div {
    position:absolute;
}
.card img {
    height:210px;
    width:150px;
}

もちろん、コードはいくらかきれいになる可能性がありますが、これは説明のためのものです ;)

于 2013-04-16T16:04:30.653 に答える