使用柔性盒使孩子的高度达到100%。
使用柔性盒使孩子的高度达到100%。
提问于 2021-10-17 03:06:38
我试图使左边的图片的祖父母<div class="col">，填充它的父容器的高度，这样它将与右边的图像相同的高度。我想让它响应，所以我尝试使用flexbox，但是找不到它，因为父程序使用的是flexbox: row，而您需要flexbox: column来让它填充父程序的高度。我知道height: 100%可以工作，但前提是要设置父容器的高度，这是我不想要的，因为我希望它能够响应。
这是我的代码：
<div class="justify-content-center row row-cols-4" style="display: flex; position: relative; background: linear-gradient(rgb(253, 221, 57) 0px, rgb(253, 221, 57) 0px) center bottom / 100% 70% no-repeat;">
<div class="col" style="display: flex;">
<div style="position: relative; align-self: flex-end;"><img src="https://cdn.contrastly.com/wp-content/themes/contrastly-v9/images/anthropics-portraitpro.png" style="width: 70%;"></div>
</div>
<div class="col" style="display: flex;">
<div style="position: relative; align-self: flex-end;"><img src="https://assets.grooveapps.com/images/5fff4a731d2cfa006f386042/1624073591_Professional-Headshots-Portraits-by-Jared-Wolfe-Alexandria-VA-Portrait-Studio-Testimonial-01.png" style="width: 70%;"></div>
</div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-10-17 08:35:59
这就是你要的。
<div class="columns">
<div class="col">
<div class="row">
<img class="img-1" src="https://cdn.contrastly.com/wp-content/themes/contrastly-v9/images/anthropics-portraitpro.png">
</div>
<div class="col">
<div class="row">
<img class="img-2" src="https://assets.grooveapps.com/images/5fff4a731d2cfa006f386042/1624073591_Professional-Headshots-Portraits-by-Jared-Wolfe-Alexandria-VA-Portrait-Studio-Testimonial-01.png">
</div>
</div>
</div>
</div>CSS
.columns {
display: inline-flex;
width: 100%;
height: auto;
background: linear-gradient(rgb(253, 221, 57) 0px, rgb(253, 221, 57) 0px) center bottom / 100% 70% no-repeat;
}
.img-1 {
width: 50%;
float: right;
display: flex;
flex-wrap: wrap;
}
.img-2 {
height: auto;
width: 63%;
display: flex;
flex-wrap: wrap;
float: right;
}
.col {
display: inline-flex;
}
.row {
max-width: 48%;
display: block;
margin: 0 auto;
}我觉得你在自学，真是太棒了！请继续走！！另外，一旦您完成了HTML层的编写，将样式抽象到CSS类中。然后玩你的CSS，直到你找到每个元素的正确答案。
我很快就找到了这个解决办法。
- 为每一列和行命名了
col-1、col-2、row-1、row-2等。 - 给这两幅图像都提供了一个
col-1元素，并逐个遍历每个元素，直到我得到每个元素的答案。
H 113移动.col和d15备份食物链。h 216g 217
当然，总是以HTML开头。但一旦你得到一个粗略的草图，抽象出来的CSS和一些乐趣。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69601039
复制相关文章
相似问题
腾讯云开发者
