stackoom
  简体   繁体   中英

how to display products side by side

 原文  2015-07-28 17:24:01  6   3    html/ css

Question

This is my product template file. 

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

Box class is defined like this in CSS: 

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

When display my product list look like this:

在此处输入图片说明

I want to show products side by side.

Can some one help me how to do that?

EDIT:

After changes suggested by Rachel Gallen, it turn out like this:

在此处输入图片说明

I want to display brand name in new line when new brand encounters. rest all looks good.

3 answers

solution1
 2 ACCPTED  2015-07-28 18:08:59

I put in .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>

solution2
 0  2015-07-28 17:34:22

Add property float:left to box class. If that doesn't work, please provide a demo.

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

solution3
 0  2015-07-28 17:42:54

You can add float in your css: 

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

And to keep the height of the container, move <div class="box">...</div> inside container like <div class="box-container">.....</div>

Then, add css: 

.box-container:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Bootstrap and Rails, display products side by side How to display the data side by side How to display image side by side? How to Write a Function that Lists Products in a Table Side-by-Side How to have display separate forms side by side How to get tables to display side by side How to display image side by side in html How to properly display two strings side by side How to display 2 images side by side using col? How to display elements side by side in multidimensional array?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM