Question

这是我的css和HTML模板文件。

#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;
}

HTML文件

<br>
<div>
    <div ng-if="SearchText.length<3" ng-repeat="product in pc.ProductService.Products  | filter:FilterExpr:true |orderBy:['SubCategoryName','BrandName'] | groupBy:['BrandName']" >
            <div ng-show="product.group_by_CHANGED"><h2>{{product.BrandName}} </h2></div>
            <div id=wrapper>
            <div class='box'>
                <ng-include src="'commonTemplate.html'"></ng-include>
            </div>
            </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> &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>

    </script>

</div>

这就是我的页面的样子 -

当新品牌出现annapurna或panchratan时，我想要的是，在新品牌中展示。然后在下一行显示该品牌的所有产品。（类似于aashirvad第一品牌。）怎么做？

Answer 1

您必须使用全宽的外部div包装整个模板：

<script type="text/ng-template" id="commonTemplate.html">
    <div class="brand-wrapper">
        <div class="BrandName"> <b>{{product.BrandName}}</b> </div>
        ...
    </div>
</script>

// May be omitted as div already block element.
.brand-wrapper {
    clear: both; // if floated
    width: 100%;
    display: block;
}

Answer 2

更改包装：内联到内联块，它应该工作。也把你的h2放在包装器里面。

此外，将框中的浮动更改为float:right;

如何在新线上展示新品牌

2 个答案: