棱角材料:将内容物垂直排列在垫格砖中 [英] angular material: vertically arranging contents in a mat-grid-tile

问题描述

我使用的是角形材质，并且有一个包含两个图块的网格列表组件.问题是内容从左到右而不是从上到下排列.

I am using angular material and have a grid list component with two tiles. the problem is the contents are getting arranged left to right rather top to bottom.

<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应该强制内容垂直排列，但事实并非如此.

i thought div should force the contents go vertically arranged but it doesnt.

默认情况下，内容在垂直方向上居中对齐.尝试align-start也没有帮助.

Also by default the contents are arranged vertically align centered. trying align-start did not help in that either.

似乎基本的东西正在工作，所以不确定我做错了什么.

Seems basic thing to be working so not sure if i am doing something wrong.

推荐答案

之所以处于水平状态，是因为Material库将位于mat-grid-tile内部的标签包装在具有flex样式元素中默认情况下为"https://developer.mozilla.org/fr/docs/Web/CSS/flex-direction" rel ="noreferrer"> flex-direction .

The reason it's horizontal is because the Material lib is wrapping your tags located inside mat-grid-tile in a flex styled element that has a row flex-direction by default.

如果我做对了，下面的代码应该是您想要的. 使用grid-list元素时，顺序很重要

If I get it right, the code below should do want you want. When using grid-list elements, the order has an 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>

您还可以将mat-grid-tile的内容包装在div中:

You could also wrap the content of your mat-grid-tile in a 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>

这篇关于棱角材料:将内容物垂直排列在垫格砖中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！