How to use Flex CSS and simulate a rowspan 2 and colspan 2

我希望使用divs构建具有2行的响应布局。

我试试这个jsbin:http://jsbin.com/jiyanayayi/edit?HTML,CSS,输出

第一行将有三个细胞,最后一个(小区3)必须有一个rowspan = 2

第二行(Cell4)具有一个colspan = 2Must受到细胞3的限制。

I tried the CSS below, but the rowspan叛徒不起作用。

如何创建此响应式布局格式?

.row{
  display: flex;
}
.cell{
  flex: 1;
  background:#eee;
  border: 1px solid #444;
  padding: 15px;
}

HTML:

<div class="table">
    <div class="row">
        <div class="cell">Cell 1 </div>
        <div class="cell">Cell 2 </div>
        <div class="cell rowspan2">Cell 3 </div>
    </div>
    <div class="row">
        <div class="cell colspan2">Cell 4</div>
    </div>
</div>
What is this supposed to look like?Paulie_D

回答 1

  1. 赞同 16

    ET 2021.使用gridCSS部位内部@supportsquerie,除非您仍然需要支持一些异国情调的浏览器或非常旧的浏览器。如果你不确定,你可以使用JSBIN样本 (也在该答案结束时挂钩)在您想要支持的浏览器中。 -JSBIN应该工作并用旧浏览器进行编辑,至少它与IE11确实如此。

    gridPlacement选项是grid-areagrid-columngrid-row别无选择grid布局模块级别2fromW3C)。以下代码使用grid-area and you will find the grid-columngrid-rowSyntax评论。

    Also这是没有A.table-layout这里的问题/答案是not.About HTML表。

    END编辑


    you need to use also flexflex-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*//*
      }
    }
    */
    <div class="table">
      <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
        <div class="cell rowspan2">Cell 3</div>
      </div>
      <div class="row">
        <div class="cell colspan2">Cell 4</div>
      </div>
    </div>

    JSBIN更新了@supports惩罚:https://jsbin.com/wexisiyamo/1/edit?HTML,CSS,输出

    g-cyrillus
    @Ângelorigo我建议你去读一些关于柔性盒的主教徒,并有一些有趣的玩耍,它可以完全理解你能做的事情;)(CSStricks和Codepen应该让这很简单)g-cyrillus
    我看到大量的白色空间3到顶部。尝试的边缘没有工作。任何想法要使元素更靠近Cell 3上的顶部?避免在Cell3和Cell1和Cell 2之间避免多个空白空间?ÂngeloRigo
    @ângelorigo不确定我明白你的意思,只有填充这些细胞删除它:)g-cyrillus
    This version seems to result in Cells 3 and 4's position being swapped, versus what's described in the question. .colspan2在标记中使用但不在风格中......Emyr
    @ emyr,HTML结构是未触动的,CSS网格尚未得到支持,但仍然可以提出,但仍然可以使用显示器更新:网格以适应100%的问题;)codepen.io/gc-nomade/pen/peybga. (显示:涉及保持结构的内容不受影响实验)g-cyrillus