Html 使用宽度百分比无效_Html_Css

Html 使用宽度百分比无效

html css

Html 使用宽度百分比无效,html,css,Html,Css,因此，我似乎无法使表格单元格达到正确的宽度。有人能帮我解决这个问题吗？更改宽度百分比似乎没有任何作用。任何建议都很好。谢谢 <html> <body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px; margin:0px;"> <div style='display : table; width : 100%; height : 100%'> <di

因此，我似乎无法使表格单元格达到正确的宽度。有人能帮我解决这个问题吗？更改宽度百分比似乎没有任何作用。任何建议都很好。谢谢

<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>


废话
卡
哈

我想您应该将它们相邻对齐。但问题是您将单元格写入了不同的表行，因此它会逐行显示它们

还有一个问题。不能将带有div的colspan用作内联样式，但需要将hah设置为2列宽度。所以你应该把它分开放在另一张桌子上

最终结果应该是这样的：

<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>


废话
卡
哈

您可以使用单元格div的inline block实现所需的布局，这样您的百分比大小就可以工作，而不必使用display:table，因为CSS表中没有与colspan等效的内容。单元格的高度必须为100%，因此它们是父行高度的100%。我们还需要框大小：单元格上的边框框，以便单元格大小包含边框大小，否则单元格将无法彼此相邻，因为边框宽度将添加到单元格宽度中，并且在正常内容框布局中超过100%

您可以查看我的JSBin演示，我已经设置了边框颜色，以便您可以清楚地看到哪个div是哪个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>

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