如何並排展示產品
[英]how to display products side by side
問題描述
這是我的產品模板文件。
<br>
<div>
<div ng-if="SearchText.length<3" ng-repeat="product in pc.ProductService.Products | filter:FilterExpr:true |orderBy:['SubCategoryName','BrandName'] | groupBy:['BrandName']" >
<h2 ng-show="product.group_by_CHANGED">{{product.BrandName}} </h2>
<div class='box'>
<ng-include src="'commonTemplate.html'"></ng-include>
</div>
</div>
<!-- template (common piece of code) -->
<script type="text/ng-template" id="commonTemplate.html">
<div class="BrandName"> <b>{{product.BrandName}}</b> </div>
<div class="ProductName"> {{product.ProductName}} </div>
<br>
<div> <img src="http://localhost/{{ product.ProductImagePath }}" alt="" border=3 height=75 width=75></img> </div>
<div class="ProductVariants">
<select class="form-control btn btn-default btn-xs text-center" 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>
</div>
<div class="Price">
<strike> {{SelectedVariant.MRP}} </strike> {{SelectedVariant.SellPrice}}
</div>
<div class="AddToCart" ng-if="SelectedVariant.InCart==0">
<a class="btn btn-success btn-sm" ng-click="pc.AddToCart(product.ProductID, SelectedVariant.VariantID)">Add to Cart
<span class="glyphicon glyphicon-plus"></span>
</a>
</div>
<div class="AddToCart" ng-if="SelectedVariant.InCart>0">
<a class="btn btn-default btn-xs" ng-click="pc.PlusItem(product.ProductID, SelectedVariant.VariantID)">
<span class="glyphicon glyphicon-plus"></span>
</a>
<button type="button" class="btn btn-sm btn-info disabled">{{SelectedVariant.InCart}} in cart</button>
<a class="btn btn-default btn-xs" ng-click="pc.MinusItem(product.ProductID, SelectedVariant.VariantID)">
<span class="glyphicon glyphicon-minus"></span>
</a>
</div>
</script>
</div>
Box類在CSS中的定義如下：
.box {
margin : 5px;
display : inline-block;
width: 170px;
height: 275px;
background-color: #F5FBEF;
text-align:center;
vertical-align: top;
}
顯示我的產品列表時，如下所示：
我想並排展示產品。
有人可以幫我怎么做嗎？
編輯：
經過Rachel Gallen建議的更改之后，結果如下：
我想在遇到新品牌時在新行中顯示品牌名稱。 休息都很好。
3 個解決方案
解決方案1
2 已采納 2015-07-28 18:08:59
我放入.ng-repeat：display：inline加上一個包裝器
#wrapper { display: inline!important; height: 275px; max-width: 540px; } .box { margin: 5px; display: inline-block; width: 170px; height: 275px!important; background-color: #F5FBEF; text-align: center; float: left; } .ng-repeat { display: inline-block; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div> <div ng-if="SearchText.length<3" ng-repeat="product in pc.ProductService.Products | filter:FilterExpr:true |orderBy:['SubCategoryName','BrandName'] | groupBy:['BrandName']"> <h2 ng-show="product.group_by_CHANGED">{{product.BrandName}} </h2> <div id=wrapper> <div class='box'> <div class="BrandName"> <b>{{product.BrandName}}</b> </div> <div class="ProductName">{{product.ProductName}}</div> <br> <div> <img src="http://localhost/{{ product.ProductImagePath }}" alt="" border=3 height=75 width=75></img> </div> <div class="ProductVariants"> <select class="form-control btn btn-default btn-xs text-center" 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> </div> <div class="Price"> <strike> {{SelectedVariant.MRP}} </strike> {{SelectedVariant.SellPrice}} </div> <div class="AddToCart" ng-if="SelectedVariant.InCart==0"> <a class="btn btn-success btn-sm" ng-click="pc.AddToCart(product.ProductID, SelectedVariant.VariantID)">Add to Cart <span class="glyphicon glyphicon-plus"></span> </a> </div> <div class="AddToCart" ng-if="SelectedVariant.InCart>0"> <a class="btn btn-default btn-xs" ng-click="pc.PlusItem(product.ProductID, SelectedVariant.VariantID)"> <span class="glyphicon glyphicon-plus"></span> </a> <button type="button" class="btn btn-sm btn-info disabled">{{SelectedVariant.InCart}} in cart</button> <a class="btn btn-default btn-xs" ng-click="pc.MinusItem(product.ProductID, SelectedVariant.VariantID)"> <span class="glyphicon glyphicon-minus"></span> </a> </div> </div> <div class='box'> <div class="BrandName"> <b>{{product.BrandName}}</b> </div> <div class="ProductName">{{product.ProductName}}</div> <br> <div> <img src="http://localhost/{{ product.ProductImagePath }}" alt="" border=3 height=75 width=75></img> </div> <div class="ProductVariants"> <select class="form-control btn btn-default btn-xs text-center" 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> </div> <div class="Price"> <strike> {{SelectedVariant.MRP}} </strike> {{SelectedVariant.SellPrice}} </div> <div class="AddToCart" ng-if="SelectedVariant.InCart==0"> <a class="btn btn-success btn-sm" ng-click="pc.AddToCart(product.ProductID, SelectedVariant.VariantID)">Add to Cart <span class="glyphicon glyphicon-plus"></span> </a> </div> <div class="AddToCart" ng-if="SelectedVariant.InCart>0"> <a class="btn btn-default btn-xs" ng-click="pc.PlusItem(product.ProductID, SelectedVariant.VariantID)"> <span class="glyphicon glyphicon-plus"></span> </a> <button type="button" class="btn btn-sm btn-info disabled">{{SelectedVariant.InCart}} in cart</button> <a class="btn btn-default btn-xs" ng-click="pc.MinusItem(product.ProductID, SelectedVariant.VariantID)"> <span class="glyphicon glyphicon-minus"></span> </a> </div> </div> </div> </div> </body> </html>
解決方案2
0 2015-07-28 17:34:22
將屬性float:left添加到box類。 如果這樣不起作用，請提供一個演示。
Jsfiddle： http : //jsfiddle.net/z9jbhmd4/
解決方案3
0 2015-07-28 17:42:54
您可以在CSS中添加float ：
.box {
margin : 5px;
display : inline-block;
width: 170px;
height: 275px;
background-color: #F5FBEF;
text-align:center;
vertical-align: top;
float: left;
}
為了保持容器的高度，請將<div class="box">...</div>移至容器內，例如<div class="box-container">.....</div>
然后，添加CSS：
.box-container:after {
content: " ";
display: block;
height: 0;
clear: both;
}
引導和導軌，並排顯示產品
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.