如何使用HTML和CSS在水平表格显示矩形内插入垂直表格显示矩形？

Question

我想创建一个有3个矩形（黑色）的页面。代码显示了这一点。现在我想在第二个水平矩形内创建3个不同大小的垂直矩形（红色）。每个文本应该在每个矩形（垂直和水平）中居中。

如何在第二个矩形中插入3列并将所有文本居中于此：

<div class="wrap">
  <div class="row_wrap">
    <div class="head x">
      ONE
    </div>
  </div>
  <div class="row_wrap">
    <div class="middle x">
      TWO
    </div>
  </div>
  <div class="row_wrap">
    <div class="bottom x">
      THREE
    </div>
  </div>
</div>

body {font-size:36px; color:green;}
.wrap {display: table; width:100%;}
.row_wrap{display:table-row;}
.x{display:table-cell; vertical-align:middle; text-align:center;}
.head{height:200px; background:#fa4;}
.middle{height:400px; background:#4af;}
.bottom{height:100px; background:#a4f;}

Answer 1

我知道这个问题很老，但知道使用flexbox来解决这个问题很有意思。

＆＃13;

＆＃13;

.row, .column{
  display: flex;
}

.row{
  width: 100%;
  height: 10rem;
  border: 3px solid black;
  flex-flow:
}

.column{
  border:3px solid red;
  height: 100%;
  flex: 1;
}

.column--big{
  flex: 2;
}

.center{
  justify-content: center;
  align-items: center
}

＆＃13;

<div class="row center">
  <span>Center</span>
</div>

<div class="row center">
  <div class="column center">
    <span>Center</span>
  </div>
  <div class="column column--big center">
    <span>Center</span>
  </div>
  <div class="column center">
    <span>Center</span>
  </div>
</div>

<div class="row center">
  <span>Center</span>
</div>

＆＃13;

＆＃13;

＆＃13;

显然可以优化此代码，但这只是一个开始。