Question

如何解决css中以下图像中的问题（我是css / html的新手）

Product List

问题是如果产品标签太长，add button会向下滑动。如果标签很短，它会向上滑动。

这是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;
}

Answer 1

实际上，在这里使用<table>是可以接受的，并且会解决您的问题。（与流行的看法相反，并非所有表都是邪恶的）。

我的例子：

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

Answer 2

嗯，如果我们考虑使用灵活的盒子来解决问题，那么减少产品信息面积的选择就不会那么糟糕。问题是你可以提供整个信息，只需剪切显示它的区域，如果用户将鼠标悬停在它上面，那么你就可以显示整个信息。

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

其他选项是在页面中定位您想要绝对的元素，但由于设计，产品数量以及您不确定文本大小和某些内容的事实，这很可能是不可能的。内容可能最终会出现在其他内容之上。

Answer 3

我认为你有两种选择。

<强>第一
在产品标签上使用CSS设置最小高度。以下是一个例子。

min-hieght:150px

<强>第二
你可以修剪弦乐并使它们完全相同的长度。

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

Answer 4

您的产品标签应具有固定的高度，请在产品标签类中添加以下内容

height: 100px;

Furthur建议，对于以下行（RS 43 / kg），您可能还想添加一类固定高度。如果它的高度可变。

Answer 5

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

var startLabel = "label text";

var labelLength = "12";

var label = startLabel.substr(0,labelLength);

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

5 个答案: