Question

所以我似乎无法让表格单元格达到正确的宽度。任何人都可以帮我解决这个问题吗？更改宽度百分比似乎没有做任何事情。任何建议都会很棒。感谢。

<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
    <div style='display : table; width : 100%; height : 100%'>

        <div style='display : table-row; width : 100%; height : 70%;'>
            <div style="height:70%; width:40%; border:solid; display : table-cell;">
                blah
            </div>
            <div style="height:70%; width:60%; border:solid; display : table-cell;">
                kah
            </div>
        </div>

        <div style='display : table-row; width : 100%; height : 30%;'>
            <div style="height:30%; width:100%; border:solid; display : table-cell;">
                hah
            </div>
        </div>

    </div>
</body>
</html>

Answer 1

我认为你想要将它们彼此相邻。但问题是你将单元格写入不同的表格行，所以它逐行显示。

然后还有另一个问题。你不能使用带有div的colspan作为内联样式，但你需要在2列宽度中使用hah。所以你应该把它分成另一个表。

决赛应该是这样的：

<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
    <div style='display : table; width : 100%; height : 70%'>

        <div style='display : table-row; width : 100%; height : 70%;'>
            <div style="height:70%; width:40%; border:solid; display : table-cell;">
                blah
</div>
            <div style="height:70%; width:60%; border:solid; display : table-cell;">
                kah
            </div>
        </div>
    </div>
      <div style='display : table; width : 100%; height : 100%'>
        <div style='display : table-row; width : 100%; height : 30%;'>
            <div style="height:30%; width:100%; border:solid; display : table-cell; colspan:2;">
                hah
            </div>
        </div>

    </div>

Answer 2

您可以使用内联块为单元格div实现所需的布局，以便您的百分比大小可以工作而不使用display：table，因为CSS表中没有等效的colspan。细胞的高度需要为100％，因此它们是父行高度的100％。我们还需要盒子大小：单元格上的边框，以便单元格大小包含边框大小，否则单元格将不会彼此相邻，因为边框宽度将添加到单元格宽度并超过100％在正常的内容框布局中。

您可以查看我的JSBin演示版here，并将其设置为边框颜色，以便您可以清楚地看到哪个div是哪个。

HTML：

<div class="table">
    <div class="row" style='height:70%;'>
        <div class="cell" style="width:40%; border:1px solid red;">
            blah
        </div><div class="cell" style="width:60%; border:1px solid blue;">
            kah
        </div>
    </div>
    <div class="row" style='height:30%;'>
        <div class="cell" style="width:100%; border:1px solid green;">
            hah
        </div>
    </div>
</div>

CSS：

body, html {height:100%;}

.table { width:100%; height: 100%; border: 1px solid pink; padding:0; margin:0;}

.row { width:100%; padding:0; margin:0;}

.cell { display: inline-block; height:100%; clear: none; padding:0; margin:0;box-sizing: border-box;}

使用宽度百分比不起作用

2 个答案: