Css 带显示的div：表列的大小为0_Css_Css Tables

Css 带显示的div：表列的大小为0

css

Css 带显示的div：表列的大小为0,css,css-tables,Css,Css Tables,我试图创造类似的东西：我尝试了以下代码，但什么也看不到： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; } #table { width: 100%; height: 100

我试图创造类似的东西：

我尝试了以下代码，但什么也看不到：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0;
        }

        #table {
            width: 100%;
            height: 100%;
            display: table;
        }

        #left {
            width: 30%;
            height: 100%;
            display: table-column;
        }

        #right {
            width: 70%;
            height: 100%;
            display: table-column;
        }

        #left_1, #left_2, #left_3, #right_1 {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }

        #left_1 {
            background-color: green;
            height: 40%;
        }

        #left_2 {
            background-color: red;
            height: 30%;
        }

        #left_3 {
            background-color: lightgray;
            height: 30%;
        }

        #right_1 {
            background-color: black;
            color: white;
            height: 100%;
        }

    </style>
</head>
<body>
<div id="table">
    <div id="left">
        <div id="left_1">left_1</div>
        <div id="left_2">left_2</div>
        <div id="left_3">left_3</div>
    </div>
    <div id="right">
        <div id="right_1">right_1</div>
    </div>
</div>
</body>
</html>

我能够成功地使用表行，但无法使表列正常工作。我做错了什么？

+1对迈克尔·科克，但这里有另一种可能性

* { 保证金：0； } 身体 html{ 身高：100%； } 桌子{ 宽度：100%；最大高度：250px；身高：100%；显示：块；位置：相对位置； } 左{ 宽度：30%；身高：100%；显示：表格；浮动：左； } 对{ 宽度：70%；身高：100%；显示：表格；浮动：左； } .row{显示：表行；} 左1，左二,，左三,，对{ 宽度：100%；显示：表格单元格；文本对齐：居中；垂直对齐：中间对齐； } 左1{ 背景颜色：绿色；身高：40%； } 左2{ 背景色：红色；身高：30%； } 左图3{ 背景颜色：浅灰色；身高：30%； } 对{ 背景色：黑色；颜色：白色；身高：100%； } 左1 左2 左图3 对

你可以通过flexbox获得它

CSS中需要的更改

#table {
    display: flex;
}
#left, #right {
    flex: 1;
    display: flex;
    flex-direction: column;
}
#left_1, #left_2, #left_3, #right_1 {
    display: flex;
    align-items: center;
    justify-content: center;
}

更新的JSFIDLE演示：

让flexbox了解它是如何工作的。

谢谢，但这就是我现在所拥有的，它在水平移动设备上运行良好。我正在试验bot flex和display:table，原因正是您提到的：为了使其具有响应性：如何使文本在水平和垂直方向居中，就像在位图中一样？为了对齐内容flex有对齐内容、对齐项目、对齐内容、对齐项目。我已经编辑了答案，请查看。我将此标记为答案，因为即使我要求显示：表格列，我认为flex是一个有效或更好的选择。