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

你可以使用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 demo：https://jsfiddle.net/1mew6hqj/2/

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

Answer 2

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

＆＃13;

* {
  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%;
}

＆＃13;

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

＆＃13;

注意：我希望这不适用于自适应网站...

带有display的div：table-column的size = 0

2 个答案: