web-dev-qa-db-ja.com

angular material：マットグリッドタイルにコンテンツを垂直に配置する

私はangularマテリアルを使用しており、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はその点でも助けにはなりませんでした。

基本的なことは機能しているように見えるので、何か間違っているのかどうかはわかりません。

angularmaterial-design
6
Vik

水平になっている理由は、マテリアルライブラリが、デフォルトで行 flex-direction を持つflexスタイルの要素のmat-grid-tile内にあるタグをラップしているためです。

私がそれを正しく理解していれば、以下のコードはあなたが望んでいるはずです。 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>

mat-grid-tileのコンテンツを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>
8
merlosy

1つ以下を試してください、それはdivの全幅を占めるようにcolspanを設定しました

<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>
1
Venkatesh Konatham