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

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

The code below is the black lines and the red lines is what I'm trying to do.

如何插入第二个矩形内的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;}

来源

2016-04-02 Ric.S

因此，添加三个子div也作为表格单元格，你会得到什么？ –

不起作用。垂直矩形只在与水平矩形分开或/和第三个矩形不要停留在同一行时才起作用。 –

因此，做一个你迄今为止尝试过的演示... –

我知道这个问题是旧的，但它也同样吸引知道这是可能解决这个使用flexbox。

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

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

该代码可以明显得到优化，但它是一个开始。

来源

2017-03-28 17:04:55

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

回答

相关问题