Question

这是我的产品模板文件。

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

Box类在CSS中定义如下：

{{1}}

显示我的产品列表时显示如下：

我想并排展示产品。

有人可以帮我怎么做吗？

编辑：

Rachel Gallen建议改变后，结果如下：

我想在新品牌遇到时在新品牌中展示品牌名称。休息一下看起来都不错。

Answer 1

我输入.ng-repeat：display：inline plus a wrapper

#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> &nbsp; {{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 &nbsp;
                <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> &nbsp; {{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 &nbsp;
                <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>

Answer 2

将属性float:left添加到box类。如果这不起作用，请提供演示。

Jsfiddle：http://jsfiddle.net/z9jbhmd4/

Answer 3

您可以在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;
}

如何并排展示产品

3 个答案: