css 如何使用flexbox将相应的框对齐到容器的右下角？

bxpogfeg 于 2023-06-25 发布在其他

关注(0)|答案(1)|浏览(168)

enter image description here
我试图对齐右边角落的绿色边框框，但没有成功，难道没有人有一个想法吗？

.gallery {
    display: flex;
    height: 480px;
    width: 1170px;
    position: relative;
    flex-wrap: wrap;
    outline: 3px solid black;
    margin: 50px auto 0;
}

.gallery .column:last-child {
    width: 770px;
    height: 224px;
    display: flex;
    justify-content: flex-start;
    border: 3px solid green;
}

.gallery .column:last-child .box {
    height: 224px;
    width: 770px;
}

<div class="gallery">
    <div class="column">
        <div class="box">
            <div class="suggested-text">
                <h2>Quae ab illo inventore</h2>
                <p>Architecto beatae vitae dicta sunt</p>
                <button type="button">Shop now</button>
            </div>
            <img src="img/Bitmaplaptops.png" alt="">
        </div>
    </div>
</div>

css

来源：https://stackoverflow.com/questions/76532422/how-do-i-align-the-respective-box-right-bottom-of-the-container-using-flexbox

1条答案

按热度按时间

ygya80vv1#

通过在.gallery和.gallery .column:last-child选择器上设置justify-content: flex-end和align-items: flex-end，绿色边框框将与容器的右下角对齐。

示例：

.gallery {
    display: flex;
    height: 480px;
    width: 1170px;
    position: relative;
    flex-wrap: wrap;
    outline: 3px solid black;
    margin: 50px auto 0;
    justify-content: flex-end;
    /* Align items horizontally to the right */
    align-items: flex-end;
    /* Align items vertically to the bottom */
}

.gallery .column:last-child {
    width: 770px;
    height: 224px;
    display: flex;
    justify-content: flex-end;
    /* Align items horizontally to the right */
    align-items: flex-end;
    /* Align items vertically to the bottom */
    border: 3px solid green;
}

.gallery .column:last-child .box {
    height: 224px;
    width: 770px;
}

<div class="gallery">
    <div class="column">
        <div class="box">
            <div class="suggested-text">
                <h2>Quae ab illo inventore</h2>
                <p>Architecto beatae vitae dicta sunt</p>
                <button type="button">Shop now</button>
            </div>
            <img src="img/Bitmaplaptops.png" alt="">
        </div>
    </div>
</div>

赞(0）回复(0）举报 2023-06-25

我来回答

css 如何使用flexbox将相应的框对齐到容器的右下角？

1条答案

相关问题

热门标签

最新问答