0

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

产品列表

问题是如果产品标签太长，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;
}
4

5 回答 5

3

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

我的例子：

<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>
于 2012-10-20T09:42:12.180 回答
1

好吧，如果我们认为使用灵活的盒子，您的问题将持续存在，那么减少产品信息区域的选项并不是那么糟糕。问题是您可以提供全部信息，只需剪辑显示它的区域，如果用户将鼠标悬停在它上面，那么您将显示全部信息。

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

其他选项是在页面中放置您想要绝对的元素，但由于设计、产品数量以及您不确定文本大小和某些内容可能结束的事实，这很可能是不可能的在别的东西之上。

于 2012-10-20T11:40:05.943 回答
0

如我所见，您有两个选择。

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

min-hieght:150px

其次
，您可以修剪字符串并使它们的长度完全相同。

var myString= " My string";
var numberOfChars = 10;
var finalString = myString.substr(0,numberOfChar) + "...";
于 2012-10-20T09:36:32.677 回答
0

您的产品标签应该是固定高度，将以下 attr 添加到您的产品标签类

height: 100px;

进一步的建议，对于跟随线（RS 43/kg），您可能还想添加一类固定高度。如果它具有可变高度。

于 2012-10-20T09:45:09.873 回答
0

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

var startLabel = "label text";

var labelLength = "12";

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

于 2012-10-20T09:48:57.763 回答