无法垂直分布 DIV答案

【问题标题】：Not able to distribute DIVs vertically无法垂直分布 DIV
【发布时间】：2022-01-25 21:31:21
【问题描述】：

我正在尝试根据下面的照片重新创建 2:1 布局，但我无法垂直分布右侧的 2 张照片，因此它们与左侧的照片完美对齐。我试着把它放在一个 flex 中，但它们是垂直分布的，我需要它们做出响应。

img-row {
    display: flex;
    flex-wrap: wrap;
}

.gridImage1 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.right-photos-div {
    justify-content:space-around;
}

.gridImage23 {
    width:100%;
    height:100%;
    object-fit:cover;
    justify-content: space-around;
}

 <div class="container-fluid row img-row">
                
                    <div class="col-12 col-md-6">
                        <h5 class="grid-image1-title position-absolute"><b>GINA Smart | The new standard in filter coffee</b></h5>
                        <h5 class="grid-image1-price position-absolute">220€</h5>
                        <img src="Images/goat-story-gina-specialty-coffee-preparation-66_3_2x_cb3f02c4-e13e-4945-b38f-513e42091a4e.jpeg" class="gridImage1" alt="Gina">
                    </div>
                    <div class="col-12 col-md-6 right-photos-div">
                        <div class="col-12 d-inline-block">
                            <h5 class="grid-image2-title position-absolute"><b>COLD BREW KIT | Cold brew made easy</b></h5>
                            <h5 class="grid-image2-price position-absolute">22€</h5>
                            <img src="Images/20190902-A7R01337_2x_120dba37-6706-456a-89f5-fdfe1c56edef.jpeg" alt="" class="gridImage23">
                        </div>
                        <div class="col-12 d-inline-block">
                            <h5 class="grid-image2-title position-absolute"><b>GOAT MUG | Unique coffee cup on the go</b></h5>
                            <h5 class="grid-image2-price position-absolute">29,5€</h5>
                            <img src="Images/goat_mug_hemp_3_2x_dd7d99a2-21cd-4730-a623-786b47beab02.jpeg" alt="" class="gridImage23">
                        </div>
                    

                </div>

            </div>

【问题讨论】：

标签： html css bootstrap-4 layout flexbox

【解决方案1】：

我设法通过以下代码实现了您正在寻找的内容：

    .grid-test{
        display:grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        height: 50vh;
    }

    img{
        width: 100%;
        object-fit: cover;
    }

    .left-side-image{
        height: 100%;
    }

    .right-grid-container{
        gap: 30px;
        display: flex;
        flex-wrap: wrap;
        padding-left: 30px;
    }

<div class="grid-test">
    <div>
        <img class="left-side-image" src="https://www.w3schools.com/css/img_lights.jpg">
    </div>
    <div class="right-grid-container">
        <img class="right" src="https://www.w3schools.com/css/img_lights.jpg">
        <img class="right" src="https://www.w3schools.com/css/img_lights.jpg">
    </div>
</div>

按照我更改的逻辑，您应该能够通过简单地将以下样式添加到您的 right-photos-div 元素来做到这一点：

    gap: 30px;
    display: flex;
    flex-wrap: wrap;
    padding-left: 30px;

请注意，您正在使用 flex-wrap 将该元素本身转换为显示 flex 元素，以便您可以在项目之间添加间隙并添加 padding-left 等效项到相同的间隙（如果您希望元素之间具有相等的间距）。

【讨论】：