我想使用div构建一个包含2行的响应式布局.
我试试这个jsbin：http://jsbin.com/jiyanayayi/edit?html,output
第一行将有三个单元格,最后一行(单元格3)必须具有rowspan = 2
具有colspan = 2的第二行(cell4)必须受到单元3的限制.
我尝试了下面的CSS,但是rowspan属性不起作用.
如何创建此响应式布局格式？
.row{
display: flex;
}
.cell{
flex: 1;
background:#eee;
border: 1px solid #444;
padding: 15px;
}
HTML：
最佳答案
你还需要使用flex和flex-wrap：
.table {
display: flex;
border: solid;
}
.row {
flex: 1;
display: flex;
}
.row:first-of-type {
flex-flow: wrap;
}
.row .rowspan2 {
flex: 1 1 100%;
}
.row div {
border: solid;
padding: 1em;
flex: 1;
}
/* ============================================================== */
/* if display grid and contents is supported then you may use it */
/* ============================================================== */
/*
@supports (display:grid) and (display:contents) {
.table {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-areas: "cell1 cell2 cell3 cell3" "cell4 cell4 cell3 cell3";
border: solid;
}
.row {
display: contents/* hide them in the structure. .row respective children become sibblings *//*
}
.row:first-child> :first-child {
grid-area: cell1;
}
.row:first-child div {
grid-area: cell2;
}
.row .cell.rowspan2 {
grid-area: cell3;
/*grid-row:span 2; no need if grid-template-area is complete*//*
}
div div {
border: solid;
padding: 1em;
}
.colspan2 {
grid-area: cell4;
/*grid-column : span 2; no need if grid-template-area is complete*//*
}
}
*/
