1列目（行なし）と2列目（各列に3行）

Question

1）最初の列は他の列と同じ高さでなければなりません2
2）最初の列の幅は40％ 30％
3）最後の2列の行が同じ高さを有していなければならない 4）最初の2行が20％

の最後の行に対し、40％の高さを有していなければならない列は、私はそれを明確にするために画像を添付しました 多くのおかげ

Answer 1

body, html, #fs { 
 
width:100%; 
 
height:100%; 
 
margin:0; 
 
padding:0; 
 
} 
 
#i1-table { 
 
display:table; 
 
width:100%; 
 
height:100%; 
 
} 
 
#i1-trow { 
 
    display:table-row; 
 
    width:100%; 
 
    height:100%; 
 
} 
 
#i1-rowspan { 
 
display: table-cell; 
 
height:100%; 
 
width:40%; 
 
background-color:red; 
 
text-align:center; 
 
vertical-align:middle; 
 
} 
 
#i1-rowcont { 
 
display: table-cell; 
 
height:100%; 
 
width:60%; 
 
} 
 
#i1-table-in { 
 
display:table; 
 
width:100%; 
 
height:100%; 
 
} 
 
.i1-rowcont-row1 { 
 
display: table-row; 
 
height:40%; 
 
width:100%; 
 
} 
 
.i1-rowcont-row2 { 
 
display: table-row; 
 
height:20%; 
 
width:100%; 
 
} 
 
.i1-cell1 { 
 
display: table-cell; 
 
width:50%; 
 
text-align:center; 
 
vertical-align:middle; 
 
} 
 
.i1-cell2 { 
 
display: table-cell; 
 
width:50%; 
 
text-align:center; 
 
vertical-align:middle; 
 
}

<div id="fs"> 
 
<div id="i1-table"> 
 
<div id="i1-trow"> 
 
<div id="i1-rowspan"> 
 
    1 
 
</div> 
 
<div id="i1-rowcont"> 
 
<div id="i1-table-in"> 
 
<div class="i1-rowcont-row1">  
 
<div class="i1-cell1" style="background-color:blue"> 
 
    2 
 
</div> 
 
<div class="i1-cell1" style="background-color:yellow"> 
 
    3 
 
</div> 
 
</div>  
 
<div class="i1-rowcont-row1">  
 
<div class="i1-cell1" style="background-color:gray"> 
 
    4 
 
</div> 
 
<div class="i1-cell1" style="background-color:cyan"> 
 
    5 
 
</div> 
 
</div>  
 
<div class="i1-rowcont-row2">  
 
<div class="i1-cell2" style="background-color:magenta"> 
 
    6 
 
</div> 
 
<div class="i1-cell2" style="background-color:green"> 
 
    7 
 
</div> 
 
</div>  
 
</div> 
 
</div>  
 
</div>  
 
</div> 
 
</div>