繁体   English   中英

Flex div 作为 img-bacground 不适合受另一个子 div 影响的最大父 div

[英]Flex div as img-bacground doesn't fit max parent div influeced by another child div

我的最终布局应该如下: 布局

“img div”和“parent text div”的宽度分别固定为“parent div”的 30% 和 70%。 父级的高度受父级文本 div 的高度影响,而这又取决于其子级中包含的文本量。

现在的问题是“img div”无法填充“parent div”的所有可用高度,事实上,它的高度为0。我更喜欢仍然使用flex display而不是固定任何div的高度。

我的 css 代码:

.parent {
    width: 100%;
    display:flex
    flex-direction: row;
    align-items: center;
}

.parent > .imgdiv{
    width:30%;
    display: flex;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background: url(img.png);
}

.parent > .parentText{
    width: 70%;
    display: flex;
    flex-direction: column;
}

子文本 div 具有类似的样式 css ...有什么建议吗?

将父级的align-items更改为stretch并从 imgdiv 中删除height: 100%

JS小提琴: https://jsfiddle.net/k597xcrv/1/

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM