Question

感谢你提前回复。

我知道如果所有图片都使用flex display和flex-end align这样的css属性为所有图片具有相同的高度和相同的标题长度而创建一个响应式产品网格，但是当我使用图像时（多个高度）和每个图像的标题（每个图像的长度不同），我遇到了这个问题：

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>

CSS代码

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

你也可以在jsfiddle找到这个代码来玩： http://jsfiddle.net/ukgqrysr

再次感谢您的回复。

Answer 1

由于您事先并未知道文本的大小，您可以并且希望文本的大小影响与包含文本的当前元素无关的其他元素 - 最简单（但是hardcoded）解决方案可以设置该容器的确切高度。如果您的所有text容器都具有完全相同的高度 - 您将能够将图像放在父容器的底部，并且它们将全部定位在完全相同的＆＃34;按钮＆＃34;位置。

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

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

现有代码的这个特定值提供了3行文字。

这是一个工作示例： http://jsfiddle.net/fmfouubk/1/

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

1 个答案: