Как выровнять элементы так, чтобы аналогичные элементы отображались в одной строке

Question

Это мой текущий дисплей.

Добавить в корзину кнопка не отображается в строке, потому что имя продукта 3-го элемента бит.

Это код для отображения продуктов.

<div> 
    <div class='box' ng-repeat="product in ProductService.Products | filter:{'SubCategoryID': SCId.toString()}:true | orderBy:'ProductName'"> 

     <br>  <b>{{product.BrandName}}</b> 
     <br>  {{product.ProductName}} 
     <br><br> <img src="http://localhost/{{ product.ProductImagePath }}" alt="" border=3 height=75 width=75></img> 
     <br><br> <select class="form-control btn btn-default btn-xs" ng-init="SelectedVariant = product.Variants[0]" ng-model="SelectedVariant" ng-options="variant.VariantName for variant in product.Variants" ng-change="ChangeVariant(product.ProductID, SelectedVariant.VariantID)"></select> 

     <br>  <strike> {{SelectedVariant.MRP}} </strike> &nbsp; {{SelectedVariant.SellPrice}} {{SelectedVariant.InCart}} 
     <br><br>   

     <div ng-if="SelectedVariant.InCart==0"> 
      <a class="btn btn-success btn-md" ng-click="AddToCart(product.ProductID, SelectedVariant.VariantID)">Add to Cart &nbsp; 
       <span class="glyphicon glyphicon-plus"></span> 
      </a> 
     </div> 



     <div ng-if="SelectedVariant.InCart>0"> 

      <a class="btn btn-default btn-xs" ng-click="PlusItem(product.ProductID, SelectedVariant.VariantID)"> 
       <span class="glyphicon glyphicon-plus"></span> 
      </a> 

      <button type="button" class="btn btn-info disabled">{{SelectedVariant.InCart}} in cart</button> 


      <a class="btn btn-default btn-xs" ng-click="MinusItem(product.ProductID, SelectedVariant.VariantID)"> 
       <span class="glyphicon glyphicon-minus"></span> 
      </a> 
     </div> 

    </div>   
</div> 

и этот стиль CSS для коробки.

.box { 
    margin : 5px; 
    display : inline-block; 
    width: 150px; 
    height: 300px; 
    background-color: #F5FBEF; 
    text-align:center; 
    vertical-align: top; 
} 

Может кто-нибудь помочь мне, чтобы все добавили в корзину кнопку или сказали, что все элементы в коробке начинаются с аналогичной строки. например, 1,2,4,5,6 элементов на дисплее.

Answer 1

я настоятельно рекомендую избегать использования <br> тегов для размещения контента.

Я бы на место всего этих элементов (названия/кнопка/изображения/ниспадающие) в отдельном контейнере сНа, где вы можете установить фиксированную высоту для каждого из этих контейнеров, где вы бы установить высоту .title чтобы быть хотя бы достаточно высоким, чтобы разрешить две строки текста.

<div class="boxes"> 
    <div class="box"> 
     <div class="title">Wheel <strong>Strong detergent bar</strong></div> 
     <div class="image"><img src=""></div> 
     <div class="price">$35</div> 
     <div class="orderbutton"><button>Order now</button></div> 
    </div> 
</div> 

И затем в .css-файле заданы размеры для каждого из этих классов.

Answer 2

Я бы добавил эллипсис, если заголовок слишком длинный, поэтому все есть одна строка.

Wrap вы ProductName в классе

<span class='product-name'>{{product.ProductName}}</span> 

Тогда стиль это

.product-name{ 
    width: 100%; 
    display: inline-block; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

this fiddle Заканчивать для рабочего примера

Answer 3

Может кто-нибудь помочь мне, чтобы все добавили в корзину кнопку или сказали, что все элементы в коробке начинаются с аналогичной строки. например, 1,2,4,5,6 элементов на дисплее.

В этом случае css flexbox. Но IE < 10 не поддерживает эту функцию.

Ожидаемый результат: http://jsbin.com/micedo

Некоторые документы: https://css-tricks.com/snippets/css/a-guide-to-flexbox/