如何对齐 Angular Material 中的卡片？答案

【问题标题】：How to align cards in Angular Material?如何对齐 Angular Material 中的卡片？
【发布时间】：2020-04-23 09:15:41
【问题描述】：

我想以行格式排列卡片，但它们以列格式显示。我附上了结果的图像。第一张卡片显示正确，但我想在第一张卡片的右侧显示第二张卡片，依此类推。但在我的代码中，第二张卡片放在第一张卡片下方。

HTML 视图文件

<md-content class="md-padding layout-xs-column layout-row" layout-xs="column" layout="row" ng-repeat="product in vm.result">      
  <div layout="column" flex-xs flex-gt-xs="30" class="layout-row flex-xs flex-gt-xs-30">
    <md-card>
      <md-card-header>
        <md-card-header-text>
          <span class="md-title">{{ product.Product_Name }}</span>
        </md-card-header-text>
      </md-card-header>
      <img ng-src="{{ product.Image }}" class="md-card-image" alt="Image here">
      <md-card-title>
        <md-card-title-text>
          <span class="md-subhead" style="font-weight: bold;">Brand: </span><span style="margin-left:10px">{{ product.Brand }}</span>
          <span class="md-subhead" style="font-weight: bold;">Color: </span><span style="margin-left:10px">{{ product.Color }}</span>
          <span class="md-subhead" style="font-weight: bold;">Price: </span><span style="margin-left:10px">{{ product.Price }}</span>
          <span class="md-subhead" style="font-weight: bold;">Url: </span><span style="margin-left:10px"><a ng-href="{{ product.Url }}">{{ product.Url }}</a></span>
          <span class="md-subhead" style="font-weight: bold;">Category: </span><span style="margin-left:10px">{{ product.Category }}</span>
          <span class="md-subhead" style="font-weight: bold;">Description: </span><span style="margin-left:10px">{{ product.Description }}</span>
        </md-card-title-text>
      </md-card-title>
      <md-card-actions layout="row" layout-align="start center">
        <md-button class="send-button md-accent md-raised" ng-click="vm.editDialog($index,product._id)">Edit</md-button>
        <md-button name="ProductId" class="send-button md-accent md-raised" ng-click="remove(product._id,'{{$index}}')">Remove</md-button>
      </md-card-actions>
    </md-card>
  </div>
</md-content>

汽车图片：

第二张卡片显示在第一张卡片下方，而不是并排显示：

由于描述太长，所有其他卡片都无法正确显示：

【问题讨论】：

标签： angularjs angular-material

【解决方案1】：

您在错误的地方使用了ng-repeat。它应该在div 元素中使用，而不是在md-content 中使用。请参阅下面的代码。 http://codepen.io/next1/pen/GZvgrK

【讨论】：

谢谢它现在正在工作，但每个产品都在同一行，但我希望第一行有 3 个产品，第二行有 3 个。
codepen.io/next1/pen/NNvPwb 只需适当的 flex 值即可获得所需的结果。
是的，已修复，但浪费了太多空间，因为有些产品的描述较少，而有些产品的时间更长，浪费了太多空间。添加到上述问题的图片和图片
再次查看上面的链接。使用带有内联样式的md-conent 来指定它的高度。
非常感谢。这对我很有帮助。