1

现在我正在做一个纸牌游戏，现在我正在编写关于手牌的代码。
我们的目标应该是这样的（这是我的代码在 IE10 中的结果）
目标
有三个要求：
1. 所有卡片都将填满手牌区域。
2. 所有卡片的宽度相同。
3.如果卡片太多，右边的一张会在左边的一张。（蓝色边框的卡片是最左边的，在第二张下面）
所以我们决定用table来做。这是代码。 

<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.
我已经阅读了一些其他类似的问题，现在我知道height表格上的 CSS 属性不起作用，并且我将解决方案之一设置.card为position: absolute;，但它仅适用于 Chrome，在 IE10 中，.cards 现在的宽度和高度为 0px，在Firefox 他们都在.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 回答