Question

船上的照片不断充斥着父母，我该怎么办？

这就是我要实现的目标

.section-features {
    height: 100vh;
    display: flex;
    flex-direction: row; 
    margin:100px;
    
}

.van {   
    display: flex;
    flex-direction:column; 
    min-height: 0;
}

<section class=section-features>   
            <img src="https://i.imgur.com/iMC3Mg6.jpg" alt="blue van on the road">
            <div class="van">   
                <img src="https://i.imgur.com/PMdn3Be.jpg" alt="sailboat on a beautiful blue water">
                <div class=feature>
                    <h2>feature</h2>
                    <p>Lorem ipsum dolor sit amet consectetur.</p>
                    <button><a href="#">Read More</a></button>
                </div>    
            </div>    
</section>

Answer 1

您必须创建一个允许您嵌套的结构：

主要部分分为两半
左半部是面包车img
右半部是另一个div，分为两半：一个用于img，另一个用于功能。

这可以通过flexbox完成。但是您必须记住，flexbox是基于单轴的方法，因此您只能在一个方向上排列项目。如果您想像这样确定两个方向，则必须嵌套这些项目。

在这种情况下，我认为CSS网格将使您更轻松。但是，我认为这是flexbox在您的安排中工作所需的结构：

<section class="section-features">
    <div class="left-panel">
        <img src="https://i.imgur.com/iMC3Mg6.jpg" alt="blue van on the road">
    </div>
    <div class="right-panel">
        <div class="sea-img">
            <img src="https://i.imgur.com/PMdn3Be.jpg" alt="sailboat on a beautiful blue water">
        </div>
        <div class="feature">
            <h2 class="feature-title">feature</h2>
            <p class="text">Lorem ipsum dolor sit amet consectetur.</p>
            <button><a href="#">Read More</a></button>
        </div>
    </div>
</section>

所有这些部分都应具有“ display：flex”属性。但是右侧面板必须为“ flex-direction：column”。

此外，将“ overflow：hidden”属性应用于包含图片的div，以避免图片溢出div。但是，即使您应用了此选项，img也将推入实际的div尺寸，因此，我建议将图像裁剪为所需的实际尺寸，或者应用max-height属性以防止其将div尺寸进一步推向您想要的尺寸。

CSS：

section {
    display: flex;
    flex-direction: row;
}

.section-features {
    height: 100vh;
    display: flex;
    direction: row;
    margin: 100px;
    overflow: hidden;
    border-style: solid;

}

.sea-img {
    width: 100%;
    margin: 0;
    overflow: hidden;
}


.right-panel {
    margin: 0 0 0 15px;
    height: 100%;
}

Answer 2

我只需要在CSS的开头添加img {width：100％}

如何防止flex子项溢出父项

2 个答案: