Question

这是我当前的显示。 enter image description here

添加到购物车按钮未显示在行中，因为第3个元素产品名称有点冗长。

这是显示产品的代码。

<div>
    <div class='box' ng-repeat="product in ProductService.Products | filter:{'SubCategoryID': SCId.toString()}:true | orderBy:'ProductName'">

        <br>        <b>{{product.BrandName}}</b>
        <br>        {{product.ProductName}}
        <br><br>    <img src="http://localhost/{{ product.ProductImagePath }}" alt="" border=3 height=75 width=75></img>
        <br><br>    <select class="form-control btn btn-default btn-xs" 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>

        <br>        <strike> {{SelectedVariant.MRP}} </strike> &nbsp; {{SelectedVariant.SellPrice}} {{SelectedVariant.InCart}}
        <br><br>        

        <div ng-if="SelectedVariant.InCart==0">
            <a class="btn btn-success btn-md" ng-click="AddToCart(product.ProductID, SelectedVariant.VariantID)">Add to Cart &nbsp;
                <span class="glyphicon glyphicon-plus"></span> 
            </a>
        </div>



        <div ng-if="SelectedVariant.InCart>0">

            <a class="btn btn-default btn-xs" ng-click="PlusItem(product.ProductID, SelectedVariant.VariantID)">
                <span class="glyphicon glyphicon-plus"></span> 
            </a>

            <button type="button" class="btn btn-info disabled">{{SelectedVariant.InCart}} in cart</button>


            <a class="btn btn-default btn-xs" ng-click="MinusItem(product.ProductID, SelectedVariant.VariantID)">
                <span class="glyphicon glyphicon-minus"></span> 
            </a>
        </div>  

    </div>          
</div>

这是盒子的CSS样式。

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

有人可以帮助我，以便所有添加到购物车按钮或说明框中的所有元素从类似的行开始。比如显示屏中的1,2,4,5,6个元素。

Answer 1

如果标题太长，我会添加一个省略号，所以一切都是一行。

在类中包装ProductName

<span class='product-name'>{{product.ProductName}}</span>

然后设置样式

.product-name{
  width: 100%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis; 
  white-space: nowrap;
}

查看this fiddle了解工作示例

Answer 2

我强烈建议您避免使用<br>标记进行内容布局。

我会将所有这些项目（ title / image / dropdown / button ）放在一个单独的div容器中，您可以在其中设置每个容器的固定高度，您可以在其中设置.title的高度至少要高到足以允许两行文本。

<div class="boxes">
   <div class="box">
      <div class="title">Wheel <strong>Strong detergent bar</strong></div>
      <div class="image"><img src=""></div>
      <div class="price">$35</div>
      <div class="orderbutton"><button>Order now</button></div>
   </div>
</div>

然后在.css文件中设置每个类的大小。

Answer 3

有人可以帮助我，以便所有添加到购物车按钮或说明框中的所有元素从类似的行开始。比如显示屏中的1,2,4,5,6个元素。

在这种情况下，将有助于css flexbox。但IE＆lt; 10不支持此功能。

预期结果：http://jsbin.com/micedo

一些文档：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如何对齐元素，使相似的元素显示在同一行中

3 个答案: