角材：マット・グリッド・タイルに内容を縦に並べる

Question

角度のある素材を使用していて、2つのタイルを持つグリッド・リスト・コンポーネントを持っています。問題はコンテンツが上から下に向かって左から右に配置されていることです。

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

divは、コンテンツを垂直に配置する必要がありますが、それはできません。

また、デフォルトでは、コンテンツは垂直方向に中央揃えで配置されています。試してみてくださいalign-startそのいずれかで助けていない。

私は何か間違っているかどうか分からないので、基本的なことが働いているようです。

Answer 1

素材のlibがflexスタイルの要素にmat-grid-tileの内側にタグをラップしているので、それは水平だ理由は、その行にはデフォルトでflex-directionがあります。

私が正しいとすれば、以下のコードはあなたが欲しいと思うはずです。 grid-list要素を使用する場合は、順序が重要

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

を持っているあなたはまた、divの中にあなたのmat-grid-tileの内容をラップすることができます：

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

Answer 2

は、div要素の幅全体を占有するように、あなたはCOLSPANを設定して、1未満にしてみてください

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