Html 电子商务产品网格中的Css问题

如何在css中修复以下图像中的问题（我对css/html不熟悉）

问题是如果产品标签太长，

add按钮

向下滑动。若标签短，它就会向上滑动

这里是css和html

<div class="product-container">
    <a href="#" class="thumbnail"><img src="img/sample_prod.jpeg" alt="Product name"  class="ProductTopCell img-rounded"></a>
    <div class="product-container-bottom">
        <p class="product-label"><a href="#">Buxted Free Range Skinless Chicken Breast Fillets (430g)</a></p>
        <p style="font-weight:600">Rs 43<small>/Kg</small></p>
        <div class="product-add-button"><span class="quantity-cell">qty <input type="number" class="quantity-number-cell" value="1"> kg</span><button class="btn btn-primary" type="button">Add</button></div>
    </div>
</div>

<div class="product-container">
    <a href="#" class="thumbnail"><img src="img/sample_prod.jpeg" alt="Product name"  class="ProductTopCell img-rounded"></a>
    <div class="product-container-bottom">
        <p class="product-label"><a href="#">Buxted Free Range Range Rang Skinless Chicken Breast Fillets (430g)</a></p>
        <p style="font-weight:600">Rs 43<small>/Kg</small></p>
        <div class="product-add-button"><span class="quantity-cell">qty <input type="number" class="quantity-number-cell" value="1"> kg</span><button class="btn btn-primary" type="button">Add</button></div>
    </div>
</div>

<div class="product-container">
    <a href="#" class="thumbnail"><img src="img/sample_prod.jpeg" alt="Product name"  class="ProductTopCell img-rounded"></a>
    <div class="product-container-bottom">
        <p class="product-label"><a href="#"> Breast Fillets (430g)</a></p>
        <p style="font-weight:600">Rs 43<small>/Kg</small></p>
        <div class="product-add-button"><span class="quantity-cell">qty <input type="number" class="quantity-number-cell" value="1"> kg</span><button class="btn btn-primary" type="button">Add</button></div>
    </div>
</div>


 .product-container .thumbnail {
    background: none;
    border: none;
    padding-bottom: 10px;
    box-shadow: none;
}

.product-container {
    border-bottom: 1px solid #C2BEB7;
    width: 172px;
    padding: 0 5px 15px 5px;
    display: inline-block;
    margin-bottom: 15px;
    height: 280px;
    vertical-align: top;
}

.product-container-bottom {
    background-image: url(img/Dotted-line.gif);
    background-position: top;
    background-repeat: repeat-x;
    padding-top: 10px;
    vertical-align: bottom;
    overflow: hidden;

}

.product-label {
    line-height: 14px;
    text-align: left;
    font-size: 13px;
    direction: ltr;
}

.product-label a {
    color: #004B91;
}

.product-add-button {
    margin-top:3px;
    text-align:right;

    vertical-align:baseline;
}

.quantity-cell {
    font-size:12px;
    vertical-align:bottom;
    margin-bottom: 0px;
    padding-right:7px;
}

.quantity-number-cell {
    width:30px;
    font-size:13px;
    height:90%;
    margin-bottom: 0px !important;
    padding-bottom:1px;
}

43卢比/千克
数量kgAdd

43卢比/千克
数量kgAdd

43卢比/千克
数量kgAdd
.产品容器.缩略图{
背景：无；
边界：无；
垫底：10px；
盒影：无；
}
.产品容器{
边框底部：1px实心#C2BEB7；
宽度：172px；
填充：0 5px 15px 5px；
显示：内联块；
边缘底部：15px；
高度：280px；
垂直对齐：顶部；
}
.产品容器底部{
背景图片：url（img/dotterline.gif）；
背景位置：顶部；
背景重复：重复-x；
填充顶部：10px；
垂直对齐：底部对齐；
溢出：隐藏；
}
.产品标签{
线高：14px；
文本对齐：左对齐；
字体大小：13px；
方向：ltr；
}
.产品标签a{
颜色：#004B91；
}
.产品添加按钮{
利润上限：3倍；
文本对齐：右对齐；
垂直对齐：基线；
}
.数量单元{
字体大小：12px；
垂直对齐：底部对齐；
边缘底部：0px；
右侧填充：7px；
}
.数量编号单元格{
宽度：30px；
字体大小：13px；
身高：90%；
页边距底部：0px！重要；
垫底：1px；
}

在我看来，您有两个选择

首先
在产品标签上使用CSS设置最小高度。下面是一个例子

min-hieght:150px

秒
您可以修剪绳子，使其长度完全相同。

var myString= " My string";
var numberOfChars = 10;
var finalString = myString.substr(0,numberOfChar) + "...";

---

在我看来，你有两个选择

首先
在产品标签上使用CSS设置最小高度。下面是一个例子

min-hieght:150px

秒
您可以修剪绳子，使其长度完全相同。

var myString= " My string";
var numberOfChars = 10;
var finalString = myString.substr(0,numberOfChar) + "...";

实际上，在这里使用

是可以接受的，并且可以解决您的问题。（与流行的观点相反，并非所有的表都是邪恶的）

我的例子是：

<table class="products">
    <tr class="figures">
        <th>
            <a href="#">
                <figure>
                    <img src="img/sample_prod.jpeg" alt="Product name" class="ProductTopCell img-rounded">

                    <p>Very very long description that will definitely break the line, and force the price to go down a bit. That will cause everything else in the row to also go down, even though they weren't directly affected.</p>
                </figure>
            </a>
        </th>
        <th>
            <a href="#">
                <figure>
                    <img src="img/sample_prod.jpeg" alt="Product name" class="ProductTopCell img-rounded">

                    <p>Description</p>
                </figure>
            </a>
        </th>
        <th>
            <a href="#">
                <figure>
                    <img src="img/sample_prod.jpeg" alt="Product name" class="ProductTopCell img-rounded">

                    <p>Description</p>
                </figure>
            </a>
        </th>
    </tr>
    <tr class="price">
        <td>Rs 34/Kg</td>
        <td>Rs 34/Kg</td>
        <td>Rs 34/Kg</td>
    </tr>
    <tr class="quantity">
        <td><label>qty <input type="number" min="0" value="1"> kg</label> <button>Add</button></td>
        <td><label>qty <input type="number" min="0" value="1"> kg</label> <button>Add</button></td>
        <td><label>qty <input type="number" min="0" value="1"> kg</label> <button>Add</button></td>
    </tr>
</table>

<style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .products {
        width: 100%;
    }
    .products th {
        font-weight: normal;
        vertical-align: top;
    }
    .products td, .products th {
        padding: 10px;
        width: 33.33%;
    }
    .price {
        font-weight: bold;
    }
    .quantity input {
        width: 3em;
    }
    .quantity button {
        padding: .2em .5em
    }
</style>

34卢比/公斤
34卢比/公斤
34卢比/公斤
数量kg添加
数量kg添加
数量kg添加
* {
填充：0；
保证金：0；
框大小：边框框；
}
.产品{
宽度：100%；
}
.产品{
字体大小：正常；
垂直对齐：顶部；
}
.products td、.products th{
填充：10px；
宽度：33.33%；
}
.价格{
字体大小：粗体；
}
.数量输入{
宽度：3em；
}
.数量按钮{
填充：.2em.5em
}

实际上，在这里使用

是可以接受的，并且可以解决您的问题。（与流行的观点相反，并非所有的表都是邪恶的）

我的例子是：

<table class="products">
    <tr class="figures">
        <th>
            <a href="#">
                <figure>
                    <img src="img/sample_prod.jpeg" alt="Product name" class="ProductTopCell img-rounded">

                    <p>Very very long description that will definitely break the line, and force the price to go down a bit. That will cause everything else in the row to also go down, even though they weren't directly affected.</p>
                </figure>
            </a>
        </th>
        <th>
            <a href="#">
                <figure>
                    <img src="img/sample_prod.jpeg" alt="Product name" class="ProductTopCell img-rounded">

                    <p>Description</p>
                </figure>
            </a>
        </th>
        <th>
            <a href="#">
                <figure>
                    <img src="img/sample_prod.jpeg" alt="Product name" class="ProductTopCell img-rounded">

                    <p>Description</p>
                </figure>
            </a>
        </th>
    </tr>
    <tr class="price">
        <td>Rs 34/Kg</td>
        <td>Rs 34/Kg</td>
        <td>Rs 34/Kg</td>
    </tr>
    <tr class="quantity">
        <td><label>qty <input type="number" min="0" value="1"> kg</label> <button>Add</button></td>
        <td><label>qty <input type="number" min="0" value="1"> kg</label> <button>Add</button></td>
        <td><label>qty <input type="number" min="0" value="1"> kg</label> <button>Add</button></td>
    </tr>
</table>

<style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .products {
        width: 100%;
    }
    .products th {
        font-weight: normal;
        vertical-align: top;
    }
    .products td, .products th {
        padding: 10px;
        width: 33.33%;
    }
    .price {
        font-weight: bold;
    }
    .quantity input {
        width: 3em;
    }
    .quantity button {
        padding: .2em .5em
    }
</style>

34卢比/公斤
34卢比/公斤
34卢比/公斤
数量kg添加
数量kg添加
数量kg添加
* {
填充：0；
保证金：0；
框大小：边框框；
}
.产品{
宽度：100%；
}
.产品{
字体大小：正常；
垂直对齐：顶部；
}
.products td、.products th{
填充：10px；
宽度：33.33%；
}
.价格{
字体大小：粗体；
}
.数量输入{
宽度：3em；
}
.数量按钮{
填充：.2em.5em
}

您的产品标签应为固定高度，请将以下属性添加到产品标签类别中

height: 100px;

---

进一步建议，对于以下行（43卢比/千克），您可能还需要添加一个固定高度的类别。如果其高度可变。

您的产品标签应为固定高度，请将以下属性添加到产品标签类中

height: 100px;

---

进一步建议，对于以下行（43卢比/千克），您可能还需要添加一个固定高度的类别。如果它的高度可变。

最简单的解决方案是使用JavaScript修剪字符串

标签文本

var labelLength=“12”

var label=startabel.substr（0，labelllength）
最简单的解决方案是使用JavaScript修剪字符串

标签文本

var labelLength=“12”

var label=startabel.substr（0，labelllength） 
 ，如果我们认为用一个灵活的盒子，你的问题会持续下去，那么减少产品信息的面积的选择就没那么糟糕了。问题是，您可以提供全部信息，只需剪辑显示信息的区域，如果用户将鼠标悬停在该区域上，则显示全部信息

我通常会选择固定大小的选项，并向客户解释描述的限制，如字符数，特别是因为这也迫使他们标准化信息，并帮助用户获得更好的数据和比较

另一种选择是在页面中定位您想要的绝对元素，但这很可能是不可能的，因为设计、产品数量以及您不确定文本大小的事实，一些内容可能最终位于其他内容之上。
，如果我们考虑到有柔性箱的问题将持续下去，减少产品信息区域的选择不是那么糟糕。问题是，你可以提供全部信息，只需剪辑显示信息的区域