Wie verwenden von Flex-CSS und simulieren rowspan 2 und colspan 2

Will ich bauen Sie ein responsive-layout mit 2 Zeilen mit divs .

Ich versuche das jsbin: http://jsbin.com/jiyanayayi/edit?html,css-Ausgabe

Wird die erste Zeile drei Zellen, von denen die Letzte (Zelle 3) muss eine rowspan = 2

Der zweiten Zeile (cell4) mit einem colspan = 2 muss begrenzt werden, indem die Zelle 3.

Habe ich versucht die CSS unten, aber die rowspan atribute hat nicht funktioniert.

Wie kann ich das responsive layout-format?

.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>
  • Was soll dies Aussehen?
InformationsquelleAutor | 2016-05-04
  1. 10

    müssen Sie auch die Nutzung von flex-und flex-wrap:

    CSS:

    .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*//*
  }
}
*/

    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>

    jsbin aktualisiert mit @supports unkommentiert : https://jsbin.com/wexisiyamo/1/edit?html,css-Ausgabe

    • Vielen Dank @GCyrillus
    • Ich schlage vor, Sie gehen, Lesen Sie ein paar tutorils über flexbox-und haben Sie etwas Spaß, um es vollständig versteht, was man damit machen kann 😉 (csstricks und codepen sollte hier einfach machen )
    • Ich sehe eine Menge der weißen Raum von Zelle 3 an die Spitze. Versucht, margin-top hat nicht funktioniert . Eine Idee, um Elemente näher an die Spitze auf Zelle 3 ? um zu vermeiden, viel leeren Raum zwischen cell3 und cell1 und Zelle 2?
    • auch nicht sicher, ob ich verstehe, was du meinst, es ist nur die Polsterung in diesen Zellen entfernen 🙂
    • Diese version scheint in den Zellen 3 und 4 die position getauscht, gegenüber dem, was beschrieben wird, in Frage. .colspan2 wird in der markup, aber nicht in dem Stile...
    • die HTML-Struktur war unberührt und CSS-grid wurde zu wenig unterstützt, die noch vorgeschlagen werden, aber immer noch, snippet konnte wurden aktualisiert mit display:grid passen 100% zu der Frage 😉 codepen.io/gc-nomade/pen/peYBga (Anzeige:Inhalt beteiligt zu halten, Struktur unverändert experimentell )

    InformationsquelleAutor G-Cyr
Schreibe einen Kommentar