angulaire matériel: verticalement organiser le contenu dans une mat-grille-tuile

Je suis en utilisant angulaire et une grille liste de composant avec deux carreaux. le problème, c'est le contenu se sont organisés de gauche à droite, plutôt du haut vers le bas.

<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>

j'ai pensé div devrait vigueur au contenu aller disposés verticalement, mais il ne marche pas.

Également par défaut, le contenu sont disposées verticalement alignement centré. essayer align-start n'a pas aide non plus.

Semble fondamentale chose de travailler si vous ne savez pas si je fais quelque chose de mal.

a u essayé de changer colspan à 3? sur les deux <mat-grille
et de faire mat-grille-liste de col durée de 6 ?

OriginalL'auteur Vik | 2017-10-27

  1. 6

    La raison pour laquelle il est horizontale est parce que le Matériel lib est l'emballage de votre tags situé à l'intérieur de mat-grid-tile dans un flex de style d'un élément qui a une ligne flex-direction par défaut.

    Si je comprends bien, le code ci-dessous devrait faire ce que vous voulez.
    Lors de l'utilisation de grid-list éléments, l'ordre a une importance

    <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>

    Vous pouvez également envelopper le contenu de votre mat-grid-tile dans un 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>
    est-il un moyen de changer le flex-direction

    OriginalL'auteur merlosy

  2. 1

    essayer ci-dessous, vous avez défini colspan afin qu'il occupera toute la largeur de la 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>
    ce col span a à voir avec le contenu à l'intérieur de la tuile?
    vous devez utiliser un peu de css, essayez de pase de votre page html, de façon que nous l'aiic aider à mieux

    OriginalL'auteur Venkatesh Konatham