无法垂直分布 DIV

Question

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

Current Layout

How it should look like

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>

Answer 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 的显示弹性元素，以便您可以在项目之间添加间隙并添加 padding-left 等同于相同的间隙（如果您希望元素之间的间距相等）。

无法垂直分布 DIV

Not able to distribute DIVs vertically

html

css

layout

flexbox

bootstrap-4