我想以行格式排列卡片,但它们是以列格式显示的。我已经附上了结果的图片。第一张卡显示正确,但我想在第一张卡的右侧显示第二张卡,以此类推。但在我的代码中,第二张卡被放在第一张卡的下面。
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>
汽车形象。
第二张牌在第一张牌的下面,而不是并排显示。
由于描述太长,所有其他卡片都不能正常显示。
你正在使用 ng-repeat
在错误的地方。它应该用在 div
元素,而不是在 md-content
请看下面的代码。http:/codepen.onext1penGZvgrK