Как выровнять карту в угловом материале?

Я хочу укладывать карты в формате строк, но показывает мне в формате column.I приложил изображение этого результата. Первая карта показана правильно, но на второй карте я хочу показать ее правую сторону от этой первой карты и так на. Но в моем коде вторая карта хранится в нижней части первой карты.Как выровнять карту в угловом материале?

вид 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>

: Из-этого длинного описания все остальные карты не показаны правильно.

источник

2016-03-29 Hemanth kumar H J

Вы используете ng-repeat в неправильном месте. Он должен использоваться в элементе div вместо использования в md-content. см. ниже код. http://codepen.io/next1/pen/GZvgrK

источник

2016-03-29 06:14:17 nextt1

спасибо, что он работает сейчас, но каждый продукт находится в одном ряду, но я хочу 3 продукта в первой строке и 3-й строке. –

http://codepen.io/next1/pen/NNvPwb Как раз вы используете значение flex для получения желаемого результата. – nextt1

Да исправлено, но столько пространства тратится, потому что у некоторых продуктов меньше описания, а у некоторых больше времени, так много пространства впустую. Обувь с изображением, которая и это изображение добавлены к вышеуказанному вопросу –

Как выровнять карту в угловом материале?

ответ

Смежные вопросы