时间戳

首页 > 解决方案 > 如何增加一个人的高度

与行中的其他人对齐？

html - 如何增加一个人的高度
与行中的其他人对齐？

问题描述

我目前正在建立一个网站，它是一个电子商务网站，而我目前正停留在实际的商店建设部分。相关代码如下：

.storeItems{
    display: inline-flex;
    padding-top: 5%;
    justify-content: space-evenly;
    margin-left: 10%;
    margin-right: 10%;
    align-items: stretch;
    padding-left: 2%;
    padding-right: 2%;
}
.storeitem{
    padding-top: 1%;
    border-radius: 10px;
    background-color:#c1d8ee;
    display: inline-flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;
    text-align: center;
    width: 20%;
    height: 30%;
}
.storeitem:hover{
    opacity: 0.5;
}
.productImage{

    display: inline-flex;
    text-align: center;
    align-self: center;
    width: 90%;
    height: 75%;
}   
.productTitle{
    display: block;
    text-align: center;
}
.productPrice{
    display: block;
    text-align: center;
}
<div class="storeItems"> <!-- The store item, containing an image, the title of the item and the price.-->
    <div class="storeitem">
        <a class="product" href="productPage.html"><img class="productImage" src="img/book.png"></a>
        <div class="productInfo">
            <h2 class="productTitle">SEAFRET Book</h1>
            <h2 class="productPrice">$14.99</h2>
        </div>
    </div>
    <div class="storeitem">
        <a class="product" href="productPage.html"><img class="productImage" src="img/bundle.png"></a>
        <div class="productInfo">
            <h2 class="productTitle">SEAFRET Bundle</h2>
            <h2 class="productPrice">$30.00</h2>
        </div>
    </div>
    <div class="storeitem">
        <a class="product" href="productPage.html"><img class="productImage" src="img/sweater.png"></a>
        <div class="productInfo">
            <h2 class="productTitle"> SEAFRET Sweater</h2>
            <h2 class="productPrice">$15.99</h2>
        </div>
    </div>
    <div class="storeitem">
        <a class="product" href="productPage.html"><img class="productImage" src="img/totebag.png"></a>
        <div class="productInfo">
            <h2 class="productTitle"> SEAFRET Totebag</h2>
            <h2 class="productPrice">$15.99</h2>
        </div>
    </div>
</div>

首先，我非常清楚我的代码读起来有多糟糕，对此我感到非常抱歉，我对 HTML 或 CSS 的编码标准一点也不熟悉。我也知道我的大部分 CSS 很可能是多余的，因为我使用的是 flexbox，但我不知道哪些部分有用，哪些部分没用，我不想再次破坏它，所以现在我要离开它。

这段代码给了我以下信息： 网站上的代码图片

正如你所看到的，中间的两块瓷砖没有外面的两块那么长，那么我该如何让中间的两块更高一些呢？设计需要具有响应性，以便可以调整大小，所以我很确定它不像仅仅增加高度那么简单。

标签： htmlcssflexbox

解决方案

您需要做的就是从商店项目类中删除宽度和高度——这就是缩小它的原因。

此外，您可能想考虑在此应用程序中使用 CSS Grid – 如果您想知道如何做，请告诉我！

.storeItems{
    display: inline-flex;
    padding-top: 5%;
    justify-content: space-evenly;
    margin-left: 10%;
    margin-right: 10%;
    align-items: stretch;
    padding-left: 2%;
    padding-right: 2%;
}
.storeitem{
    padding-top: 1%;
    border-radius: 10px;
    background-color:#c1d8ee;
    display: inline-flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;
    text-align: center;
    margin: 1em;
    padding: 1em;
}
.storeitem:hover{
    opacity: 0.5;
}
.productImage{

    display: inline-flex;
    text-align: center;
    align-self: center;
    width: 90%;
    height: 75%;
}   
.productTitle{
    display: block;
    text-align: center;
}
.productPrice{
    display: block;
    text-align: center;
}
<div class="storeItems"> <!-- The store item, containing an image, the title of the item and the price.-->
    <div class="storeitem">
        <a class="product" href="productPage.html"><img class="productImage" src="img/book.png"></a>
        <div class="productInfo">
            <h2 class="productTitle">SEAFRET Book</h1>
            <h2 class="productPrice">$14.99</h2>
        </div>
    </div>
    <div class="storeitem">
        <a class="product" href="productPage.html"><img class="productImage" src="img/bundle.png"></a>
        <div class="productInfo">
            <h2 class="productTitle">SEAFRET Bundle</h2>
            <h2 class="productPrice">$30.00</h2>
        </div>
    </div>
    <div class="storeitem">
        <a class="product" href="productPage.html"><img class="productImage" src="img/sweater.png"></a>
        <div class="productInfo">
            <h2 class="productTitle"> SEAFRET Sweater</h2>
            <h2 class="productPrice">$15.99</h2>
        </div>
    </div>
    <div class="storeitem">
        <a class="product" href="productPage.html"><img class="productImage" src="img/totebag.png"></a>
        <div class="productInfo">
            <h2 class="productTitle"> SEAFRET Totebag</h2>
            <h2 class="productPrice">$15.99</h2>
        </div>
    </div>
</div>

推荐阅读