html - 如何并排展示产品-6ren

html - 如何并排展示产品

转载作者：太空宇宙更新时间：2023-11-04 02:58:45

这是我的产品模板文件。

<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类在CSS中是这样定义的:

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

当显示我的产品列表时是这样的:

我想并排展示产品。

有人可以帮我怎么做吗？

编辑:

在 Rachel Gallen 建议的修改之后，结果是这样的:

我想在遇到新品牌时换行显示品牌名称。休息一切看起来不错。

最佳答案

我放入 .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> &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>

关于html - 如何并排展示产品，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31683200/

文章推荐： html - Bootstrap 下拉悬停删除样式

文章推荐： C 以与 Java Compiler Api 7 相同的方式动态加载代码

文章推荐： node.js - Nodejs 处理另一台服务器上的登录

文章推荐： c - TreeView fontsize - 自定义绘制或所有者绘制

php - 如何过滤属于特定类别的帖子 [产品]
我需要按不同类别过滤我网站上的产品。例如，如果您选择“DRINKS”类别，它将向我显示属于该类别的产品。为了更好地解释自己。我需要按类别过滤我网站的出版物 [产品]，例如，在选择一个类别时说“饮料
c# - 获取列表中每个项目的对象集合(产品)
我有 orders 集合，其中包含 products 集合。我将一些产品 ID 作为列表传递给该方法。我需要返回与任何匹配的产品列表input 列表中的 id。我需要像这样使用 foreach 循环
Xcode 产品 -> 存档已禁用
我已经为临时分发进行存档好几个月了，但今天突然我无法这样做，因为“存档”菜单项已被禁用。我没有改变任何东西。我完成了该项目的配置设置，看起来没问题。我的临时个人资料即将在 14 天后过期。这可能是问
MYSQL:产品-属性关系
我正在尝试找出产品和产品属性之间的关系。我有一个 product 表和一个 product_attributes 表。产品可以具有多种属性。我需要查询来查找具有一个特定属性和另一个属性之一的所有产品。
mysql - 产品、类别和公司之间的数据库关系
我正在使用 MySQL Workbench 创建 EER 图。实现产品、类别和公司表之间关系的最佳方式是什么？我正在考虑这种关系，但考虑到我想让公司的客户管理自己的产品/类别，这是最好的方式吗？如
Python itertools.产品
我正在使用 itertools 包，并尝试在具有 900 个值的数组中创建 1、2 和 3 的所有可能组合，然后将其转换为 30 x 30 矩阵。我必须执行此操作的代码在下面并且工作正常。 for d
python - 我该如何着手定制夹层墨盒商店/产品？
我有几个关于 Cartridge 启动器的问题: 我的产品不需要评级或发布日期。他们永远不会出售。一些产品是可下载的，因此“num_in_stock”不相关或本质上是无限制的。没有颜色选项，只有尺寸。
MySQL:(产品)价格的首选列类型？
在 MySQL 中，存储产品价格(或一般货币)的首选列类型是什么？谷歌知道我经常使用 DECIMAL of FLOAT，但我想知道哪个更好。我存储的价格范围是 0.01 到 25.00。当然更高的值
产品、开发、测试人手一份：升级上线检查清单大全
在软件开发过程中，尤其是在准备将新功能或修复后的版本上线之前，进行详尽的自测和上线前检查是至关重要的。以下是一个从多个维度综合考量的上线升级检查清单（Checklist），旨在帮助团队确保软件质量、稳
php - 使用自定义元查询显示带有简码的 WooCommerce 产品
我正在创建一个闪购网站，并且我已经在主页和商店页面上根据日期范围显示产品。但我也想根据其他地方的日期范围显示产品，因此使用简码。这是我的代码: function testt($meta_query)
php - 以编程方式批量创建 WooCommerce 产品
可以在 WooCommerce 上批量创建产品吗？我正在使用 wp-cli Product 命令，但似乎我必须一个一个地创建。 'My product 1'), array('title'
excel - 使用自定义元动态定价规则导入 WooCommerce 产品
我有一个带有数量和价格列的 excel 文件，我用它来为插件 WooCommerce Dynamic Pricing 创建必要的输出的定价规则。我几乎想通了，但是 WooCommerce 进口商正在
wordpress - 按自定义属性对象过滤 WooCommerce 产品
我刚刚继承了一个woocommerce项目，我需要将主页更改为仅显示特定品牌。他们设置了 Product-Data => Attribute => pa_brand。如果我打印 pa_brand 数
php - 在自己的插件中获取所有 WooCommerce 产品
在插件中如何使用 wc_get_products() 获取产品。或者有其他方法可以做到吗？ if ( in_array( 'woocommerce/woocommerce.php', apply_fi
statistics - 任何用于计算文件下载和页面浏览量的 Plone 产品？
我正在做一个无法从公司网络外部访问的内部网，他们希望在 Plone 中显示一些关于文件下载和最常查看的页面的不错的统计数据。由于网络限制，我无法使用谷歌分析或任何类型的外部服务，那么是否有任何产品可
security - 产品 key 优化
我正在就以下问题寻求建议: 保留哪些产品 key 属于哪个客户端的列表。例如，如果我的产品 key 为 8456-7894-4567-7894，则应该这样设计，以便将列表写入数据库而不是文件。如何将
.net - 产品 API 的完整列表
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he
php - 尝试添加搜索栏管理面板菜单栏搜索 woocommerce 产品
尝试将产品搜索栏添加到 Wordpress 管理栏后端，以进行 Woocommerce 产品搜索。它将位于后端管理菜单栏的顶部，这样无论您在后端的哪个位置，都可以搜索 woo 的产品。我很接近但在小绊
wordpress - 根据属性查询 WooCommerce 产品
这让我抓狂.. 我正在尝试根据特定属性查询和输出 WooCommerce 产品。例如，我设置了一个名为 on 的属性，可能的值为 yes或 no . 我使用以下查询: $args = array(
json - 获取所有 Shopify 产品
我正在尝试从 Shopify 商店获取所有产品的 JSON。我一直在向 {STORE URL}/products.json 端点。但这最终只显示了商店提供的部分产品(很多，但不是全部)。当我将参数更改

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何并排展示产品