eckig material: vertikal anordnen von Inhalt in eine mat-Gitter-Fliese

Ich bin mit Winkel-material und haben ein raster-list-Komponente mit zwei Fliesen. das problem ist der Inhalt immer angeordnet von Links nach rechts sondern von oben nach unten.

<mat-grid-list cols="3" style="padding:10px">
  <mat-grid-tile colspan="1" class="mi-tile-contents-top">
    <h2 class="mi-text-header">Title</h2>
    <div>some sort of text in between</div>
    <button mat-raised-button class="mi-button">Learn More</button>
  </mat-grid-tile>
  <mat-grid-tile colspan="2"><img src="../assets/images/cg_app.png" width="100%"/></mat-grid-tile>
</mat-grid-list>

dachte ich div zwingen sollte, den Inhalt gehen vertikal angeordnet, aber es tut.

Auch standardmäßig die Inhalte sind nun vertikal angeordnet-align zentriert. versuchen align-start nicht helfen, entweder.

Scheint eine einfache Sache zu arbeiten, sich also nicht sicher, wenn ich mache etwas falsch.

hast du versucht, die änderung colspan 3? auf beiden <mat-Gitter
und macht mat-grid-Liste col span 6 ?

InformationsquelleAutor Vik | 2017-10-27

  1. 6

    Grund ist er horizontal ist, weil das Material lib ist das umschließen des tags befinden sich innerhalb mat-grid-tile im flex Stil-element, das eine Zeile flex-direction standardmäßig.

    Falls ich das richtig, der code unten sollte tun, was du willst.
    Bei der Verwendung von grid-list Elemente, die Reihenfolge hat eine Bedeutung

    <mat-grid-list cols="3" style="padding:10px">
    <mat-grid-tile colspan="1" rowspan="1">
        <h2>Title</h2>
    </mat-grid-tile>
    <mat-grid-tile colspan="2" rowspan="3">
        <img src="../assets/images/cg_app.png" width="100%"/>
    </mat-grid-tile>
    <mat-grid-tile colspan="1" rowspan="1">
      <div>some sort of text in between</div>
    </mat-grid-tile>
    <mat-grid-tile colspan="1" rowspan="1">
      <button mat-raised-button class="mi-button">Learn More</button>
    </mat-grid-tile>
</mat-grid-list>

    Könnten Sie auch wickeln Sie den Inhalt Ihrer mat-grid-tile in einem div:

    <mat-grid-list cols="3" style="padding:10px">
    <mat-grid-tile colspan="2" >
        <div>
            <h2>Title</h2>
            <div>some sort of text in between</div>
            <button mat-raised-button class="mi-button">Learn More</button>
        </div>
    </mat-grid-tile>
    <mat-grid-tile colspan="1">
        <img src="../assets/images/cg_app.png" width="100%"/>
    </mat-grid-tile>
</mat-grid-list>
    gibt es eine Möglichkeit zum ändern der flex-direction

    InformationsquelleAutor merlosy

  2. 1

    versuchen Sie es unter einem, den Sie gesetzt haben, colspan, so dass es belegt die volle Breite des div -

    <mat-grid-list cols="3" style="padding:10px">
<mat-grid-tile md-colspan="6" colspan="6" class="mi-tile-contents-top">
  <h2 class="mi-text-header">Title</h2>
  <div>some sort of text in between</div>
  <button mat-raised-button class="mi-button">Learn More</button>
 </mat-grid-tile>
<mat-grid-tile md-colspan="6" colspan="6" ><img src="../assets/images/cg_app.png" width="100%"/></mat-grid-tile>
</mat-grid-list>
    was col span zu tun hat, mit der Inhalte in der Kachel?
    Sie haben die Nutzung einiger css, versuchen pase Ihre html-Seite hier, so dass wir cna besser helfen

    InformationsquelleAutor Venkatesh Konatham

Schreibe einen Kommentar