带显示的 div：table-列的大小为 0

Question

我正在尝试创建与此类似的内容：

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

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

我能够成功使用 table-row，但我无法让 table-column 工作。我做错了什么？

Answer 1

+1 致 Michael Coker，但这是另一种可能性。

* {
  margin: 0;
}
body,
html {
  height: 100%;
}
#table {
  width: 100%;
  max-height: 250px;
  height: 100%;
  display: block;
  position: relative;
}
#left {
  width: 30%;
  height: 100%;
  display: table;
  float: left;
}
#right {
  width: 70%;
  height: 100%;
  display: table;
  float: left;
}

.row {  display: table-row;  }

#left_1,
#left_2,
#left_3,
#right_1 {
  width: 100%;
  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%;
}

<div id="table">
  <div id="left">
    <div class="row">
      <div id="left_1">left_1</div>
    </div>
    <div class="row">
      <div id="left_2">left_2</div>
    </div>
    <div class="row">
      <div id="left_3">left_3</div>
    </div>
  </div>
  <div id="right">
    <div class="row">
      <div id="right_1">right_1</div>
    </div>
  </div>
</div>

注意：我希望这不是针对响应式网站...

Answer 2

你可以用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;
}

更新了 jsfiddle 演示：https://jsfiddle.net/1mew6hqj/2/

Check this guide 了解 flexbox 的工作原理。

带显示的 div：table-列的大小为 0

divs with display: table-column have size=0

css

css-tables