html - eコマースの製品グリッドでのCSSの問題

Question

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

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

商品ラベルの高さは固定されている必要があります。商品ラベルクラスに次の属性を追加してください

height: 100px;

さらに、次の行（RS 43 / kg）については、固定高さのクラスも追加することをお勧めします。高さが可変の場合。

Answer 4

私が見るように、あなたには2つの選択肢があります。

まず
、商品ラベルにCSSを使用して最小の高さを設定します。以下に例を示します。

min-hieght:150px

次に
、文字列をトリミングして、すべて同じ長さにすることができます。

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

Answer 5

最も簡単な解決策は、JavaScriptを使用して文字列をトリミングすることです。

var startLabel = "label text";

var labelLength = "12";

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