如何使用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在水平表格顯示矩形內插入垂直表格顯示矩形？

回答

相關問題