html – 如何使用Flex CSS并模拟rowspan 2和colspan 2

前端之家收集整理的这篇文章主要介绍了html – 如何使用Flex CSS并模拟rowspan 2和colspan 2前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我想使用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*//*
  }
}
*/
原文链接:https://www.f2er.com/html/426242.html

猜你在找的HTML相关文章