现在我正在玩纸牌游戏,现在我在写有关手牌的代码。
我们的目标应该像(这是我的代码在IE10中的结果)
Target
有三个要求:
1.所有卡将填满手牌区域。
2.所有卡的宽度相同。
3.如果卡片太多,则右边的卡片将在左边的卡片上。 (带有蓝色边框的卡片最左边,低于第二张卡片)
因此,我们决定使用表来执行此操作。 这是代码。

<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属性不起作用,并且我将将.card设置为position: absolute;的解决方案之一position: absolute; ,但仅适用于Chrome浏览器,在IE10中, .card的宽度和高度现在为0px,在Firefox中,它们都位于.hand的中心。
那么,是否有任何Cross-Browser解决方案来设置高度?
非常感谢!

===============>>#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;
}

代码当然可以更简洁一些,但这只是出于说明目的;)

  ask by Simon Chan translate from so

未解决问题?本站智能推荐:

1回复

IE使用display:table-cell忽略100%高度div中的块div中的百分比高度

我想要这样的设计: 这是我正在使用的代码: http : //jsfiddle.net/yKPq3/18/ ,在Chrome和Firefox中可以正常使用。 但是IE(9)不会扩展内部div,内部div的高度应为其父级的96%。 我如何才能在没有Javascript的情况下在IE
1回复

为什么百分比高度不适用于display:table-cell?

我试图在水平和垂直方向上将div放在外部div中。 它适用于外部div具有特定的宽度和高度设置像素 但是当高度和宽度都是百分比时,它会失败 为什么会这样,是否有解决方法? 编辑这是带有容器CSS的HTML:
2回复

文字长度+表格单元格+百分比高度 - 这里发生了什么?

我有一个使用display: table-cell的div display: table-cell包含一个子div ...都使用基于百分比的维度。 当该子div包含超过一定数量的文本(取决于字体大小)时,它将忽略其高度规则。 这是一个孤立的测试用例 单击“切换文本”按钮将演示此问题
2回复

我希望两个垂直堆叠的空div(以显示背景图像)完全共享父容器高度的50%,减去固定间隙(例如20px)。 我为此使用calc()-因为我的情况下Opera Mini无关紧要。 我在所有浏览器上都能正常工作: html, body { height: 100%; width
2回复

如何使用百分比高度显示表格中div的滚动条

我必须编写一个如下所示的页面,但是,滚动条不会在IE 11和FireFox中显示。 我该怎么办才能解决问题? <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org
2回复

Div的百分比高度未按预期工作

我想到了一个非常奇怪的行为。 我创建了3个div,其高度以百分比表示。 当我在自己的页面上测试它们时,其行为符合预期,但是当我将它们包含在另一个容器中时,它们会失去高度。 我认为发生这种情况是因为在正常页面中,高度是正文的百分比,而在容器上是父div的百分比,但是我可以确切地知道该怎么
2回复

Div结构的百分比高度

我正在尝试在页面上构建某种结构。 高度为400px的主div(.row),两个子div(列col-md-6)和五个内部div:两个具有父高度的50%,三个具有父高度的33%。 我不知道如何实现这一点。 你能推荐最好的解决方案吗? PS我正在使用bootstrap3。 更新
3回复

Div百分比高度[重复]

可能重复: 百分比高度HTML 5 / CSS 这需要一个简单的但我为什么以div的百分比指定的高度不适用于它。 例如: CSS: 当我将高度从%更改为px时,它可以完美地运行。 %与px一样有效,但为什么只有px有效,%为无效。 这是jsfiddle
8回复

我可以创建一个HTML表宽度百分比高度但像素精确行高吗?

我需要在一个有两行的网页上创建一个表。 该表需要填充整个页面,因此我在CSS样式表中将表的高度和宽度设置为100%,并将HTML和正文的高度设置为100%。 但是,我需要将表格的顶行精确地设置为100像素高度,然后展开第二行以适应表格的其余部分。 当我设置顶行的高度时,它不起作用。
1回复

在WordPress中使用视口高度(vh)显示div标签以显示窗口的百分比高度

这是它的外观,但是当我粘贴相同的代码时: 进入wordpress代码编辑器并发布, 这就是我得到的 。 我希望div标签及其内容占据视口垂直高度的80%。 如果无法在wordpress上使用此方法,但可以选择另一种方法,请告诉我? 非常感谢