如何對齊元素使相似元素顯示在同一行

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>標籤內容佈局避免。

我將所有在一個單獨的div容器的那些項目（標題/圖像/下拉/按鈕）的在這裏可以設置爲這些容器中的每一個，在這裏將設置.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

如果標題太長，我會添加省略號，因此一切都是一行。

總結你在產品名稱一類

<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/