如何在相同的底层设置图像（仅使用css no js）？

提前感谢您的回复

我知道，如果我只使用css属性（如

flex-display

和

flex-end-align

）为孩子们创建所有图片都具有相同高度和相同标题长度的产品网格，我会如何创建响应性产品网格，但当我为每个图片使用图像（多个高度）和标题（每个图片的长度不同）时，我会遇到以下问题：

HTML代码

<div class="imgContainer">
    <div class="imgChild row-eq-height">
        <div class="img-slider-parent">
            <div class="container-slider">
                <button class="btn green-btn" type="button">Voir</button>
            </div>
            <img class="imgSlider" src="https://placebear.com/200/400">
        </div>
        <div>
            <div class="product-title">title1</div>
            <div class="product-number">category1</div>
        </div>
    </div>
    <div class="imgChild row-eq-height">
        <div class="img-slider-parent">
            <div class="container-slider">
                <button class="btn green-btn" type="button">Voir</button>
            </div>
            <img class="imgSlider" src="https://placebear.com/350/400">
        </div>
        <div>
            <div class="product-title">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
            <div class="product-number">category1</div>
        </div>
    </div>
    <div class="imgChild row-eq-height">
        <div class="img-slider-parent">
            <div class="container-slider">
                <button class="btn green-btn" type="button">Voir</button>
            </div>
            <img class="imgSlider" src="https://placebear.com/300/400">
        </div>
        <div>
            <div class="product-title">yyyyyyyyyyyyyyyyyyyyyyyyyyyyy</div>
            <div class="product-number">category1</div>
        </div>
    </div>
    <div class="imgChild row-eq-height">
        <div class="img-slider-parent">
            <div class="container-slider">
                <button class="btn green-btn" type="button">Voir</button>
            </div>
            <img class="imgSlider" src="https://placebear.com/200/250">
        </div>
        <div>
            <div class="product-title">title1</div>
            <div class="product-number">category1</div>
        </div>
    </div>
    <div class="imgChild row-eq-height">
        <div class="img-slider-parent">
            <div class="container-slider">
                <button class="btn green-btn" type="button">Voir</button>
            </div>
            <img class="imgSlider" src="https://placebear.com/200/200">
        </div>
        <div>
            <div class="product-title">title1</div>
            <div class="product-number">category1</div>
        </div>
    </div>
    <div class="imgChild row-eq-height">
        <div class="img-slider-parent">
            <div class="container-slider">
                <button class="btn green-btn" type="button">Voir</button>
            </div>
            <img class="imgSlider" src="https://placebear.com/200/100">
        </div>
        <div>
            <div class="product-title">title1</div>
            <div class="product-number">ooooooooooooooooooooooooooooo</div>
        </div>
    </div>
</div>

.imgContainer {
    width: 100%;
    /* background-color: red;*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.imgChild {
    width: 20%;
    padding: 10px;
    float: left;
    flex-direction: row;
    align-self: flex-end;
    background-color: red;
}

.imgChild > img {
    width: 100%;
}

.product-title,
.product-number {
    word-wrap: break-word;
}

.product-title {
    font-weight: 600;
    padding-top: 15px;
}


.img-slider-parent {
    position: relative;
    cursor: pointer;
}

.container-slider {
    display: none;
}

.green-btn {
    display: block;
    background: #3DCFB2;
    border-radius: 19px;
    padding: 4px;
    padding-left: 35px;
    padding-right: 35px;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    color: white;
}
.imgSlider {
    width: 100%;
}

您还可以在JSFIDLE上找到以下代码：

---

再次感谢您的回复。

由于您事先不知道文本的大小，您可以并且希望文本的大小影响与包含文本的当前元素无关的其他元素-最简单的解决方案（无论硬编码如何）是设置该容器的确切高度。如果所有

文本

容器的高度完全相同，则可以将图像放在父容器的底部，并且它们都将位于完全相同的“按钮”位置

可以使用以下方法设置此高度：

.imgChild.row-eq-height > div:nth-child(2) {
    height: 55px;
}

此特定值与现有代码一起提供3行文本

以下是一个工作示例：

---

如果有任何想法，请提供帮助或建议。您需要这样的东西吗@ZeevKatz抱歉，不，我必须将图像设置在相同的底线谢谢，所以这很好，但我在调整屏幕大小时遇到了一些问题：文本被注入到图像的顶部。问题是，如果您不知道可能需要多少行，就不能使用固定值。只有当您知道需要多少行文本时（正如我的回答中提到的），这个示例（使用您当前的结构）才会起作用。是的，这就是问题所在：/好吧，回答上的voteup会很好；）（尽管它并不能真正解决你所有的问题）。为什么你需要一个只有CSS的解决方案？不，我只想使用CSS，不需要js，我知道你是如何使用js流程来解决这个问题的：）