如何在每列中标记1列（不包含行）和2列，每行3行

Question

1）第1列应与其他2列具有相同的高度 2）第一列应具有40％的宽度，而其他列具有30％的
3）最后2列中的行应具有相同的高度 4）前2行应该有40％的高度，而最后一行应该有20％

我附上了一张照片以清楚显示 非常感谢

Answer 1

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;