0

我试图创建一个响应式卡片列表，该列表具有最小宽度，填充所有可用空间（根据浏览器大小排列 1、2、3 块）。

到目前为止，我有代码是做什么的：

<div class='md-padding' layout="row" layout-wrap>
  <md-card style="min-width: 460px;" ng-repeat="teacher in tc.teachers" flex>
    <md-card-title>
      <md-card-title-text>
        <span class="md-headline" style="padding-bottom: 10px;">{{ teacher.name }}</span>
        ... other elements ....
      </md-card-title-text>
      <md-card-title-media>
        <div class="md-media-lg card-media" style="height: 228px;">
          <img ng-if="teacher.image" ng-src="{{ tc.getImage( teacher ) }}" class="md-card-image" >
        </div>
      </md-card-title-media>
    </md-card-title>
  </md-card>
</div>

什么技巧在第 2 行style="min-width: 460px;"和flex

但是，我面临的问题是最后一个元素也“弯曲”到整个宽度，例如，当一行中有 3 张卡片而最后一行只有 1 个元素时，这看起来很丑陋……

在这种情况下，我如何将最后一个元素调整为 1/3 并响应进一步的尺寸变化？

我正在使用带有角材料的 Angular 1.6.1。

4

1 回答 1

4

为此，您可以使用 Angular Material md-grid-list和md-grid-tile （您可以在此处和此处查看文档），您可以指定每个屏幕尺寸所需的列数（xs、sm、md、 lg等）列的高度和其他一些东西。

例如，如果最后一行只有一个元素，则该元素不会比其他元素大。

你可以像这样使用它：

<md-grid-list md-cols-xs="1" md-cols-sm="2" md-cols-md="3" md-cols-lg="4" md-row-height="100px">
    <md-grid-tile ng-repeat="teacher in tc.teachers">
        <!-- width : 100% -> to make the cards gets the full width -->
        <md-card style="width:100%;">
            <md-card-title>
                <md-card-title-text>
                    <span class="md-headline">{{ teacher.name }}</span>
                    ... other elements ....
                </md-card-title-text>
            </md-card-title>
        </md-card>
    </md-grid-tile>
</md-grid-list>

这是一个工作示例。

于 2017-07-18T13:43:17.427 回答