我正在尝试使flex项目(橙色div和图片div)具有相同的高度。设置高度为100%并没有什么区别,并且在缩小浏览器窗口时,最终橙色div变得比图片div高。
知道我在哪里错了吗?我以为弹性孩子通常身高相等。
感谢您的帮助。
.appShopSummaryContainer {
display: flex;
flex-flow: column wrap;
}
.appShopSummaryContainer .appShopSummaryProductWrap {
flex-basis: 100%;
background: pink;
height: 100%;
width: 100%;
display: flex;
flex-flow: row nowrap;
align-items: center;
}
.appShopSummaryContainer .appShopSummaryImg {
flex: 0 0 40%;
height: auto;
padding-bottom: 26.667%;
background: green;
background-size: cover !important;
background-position: center center !important;
}
.appShopSummaryContainer .appShopSummaryInfo {
flex: 0 0 60%;
background: orange;
height: 100%;
display: flex;
flex-flow: column wrap;
align-items: flex-start;
}
.appShopSummaryContainer .appShopSummaryMoreInfoBtn {
cursor: pointer;
background: #214291;
color: #fff;
padding: 10px;
border-radius: 5px;
}
<div class="appShopSummaryContainer">
<!-- FOR EACH THING DO THIS -->
<div class="appShopSummaryProductWrap">
<a href="#" class="appShopSummaryImg" style="background:url('https://cml.sad.ukrd.com/image/394545.jpg')"></a>
<div class="appShopSummaryInfo">
<h3>title here...</h3>
<a href="#" class="appShopSummaryMoreInfoBtn">More Information</a>
</div>
</div>
<!-- ENDFOREACH -->
</div>
答案 0 :(得分:3)
这是因为您已将商品对准中心,将其从appShopSummaryProductWrap
中移出,并将height:100%
从appShopSummaryInfo
中移出,它将起作用:
.appShopSummaryContainer .appShopSummaryProductWrap {
background: pink;
width: 100%;
display: flex;
flex-wrap:nowrap;
}
.appShopSummaryContainer .appShopSummaryImg {
display:block;
width:40%;
padding-bottom: 26.667%;
background: green;
background-size: cover !important;
background-position: center center !important;
}
.appShopSummaryContainer .appShopSummaryInfo {
flex-grow:1;
background: orange;
display: flex;
flex-flow: column wrap;
align-items: flex-start;
}
.appShopSummaryContainer .appShopSummaryMoreInfoBtn {
cursor: pointer;
background: #214291;
color: #fff;
padding: 10px;
border-radius: 5px;
}
<div class="appShopSummaryContainer">
<!-- FOR EACH THING DO THIS -->
<div class="appShopSummaryProductWrap">
<a href="#" class="appShopSummaryImg" style="background:url('https://cml.sad.ukrd.com/image/394545.jpg')"></a>
<div class="appShopSummaryInfo">
<h3>title here...</h3>
<a href="#" class="appShopSummaryMoreInfoBtn">More Information</a>
</div>
</div>
<!-- ENDFOREACH -->
</div>
答案 1 :(得分:1)
尝试在此类!0 === true //true
.appShopSummaryContainer .appShopSummaryProductWrap
中删除,并在align-items
.appShopSummaryContainer .appShopSummaryInfo
中删除
答案 2 :(得分:1)
事物的结合;
background
,则必须在CSS中使用!important。如果您使用background-image
,则不会。
.appShopSummaryContainer {
display: flex;
flex-flow: row wrap;
}
.appShopSummaryContainer .appShopSummaryProductWrap {
flex-basis: 100%;
background: pink;
width: 100%;
display: flex;
flex-flow: row nowrap;
align-items: center;
}
.appShopSummaryContainer .appShopSummaryImg {
flex: 0 0 40%;
height: 100%;
background: green;
background-size: cover;
background-position: center;
}
.appShopSummaryContainer .appShopSummaryInfo {
flex: 0 0 60%;
background: orange;
height: 100%;
display: flex;
flex-flow: column wrap;
align-items: flex-start;
}
.appShopSummaryContainer .appShopSummaryMoreInfoBtn {
cursor: pointer;
background: #214291;
color: #fff;
padding: 10px;
border-radius: 5px;
}
<div class="appShopSummaryContainer">
<!-- FOR EACH THING DO THIS -->
<div class="appShopSummaryProductWrap">
<a href="#" class="appShopSummaryImg" style="background-image: url('http://www.dieren-en-planten.nl/wp-content/uploads/2015/08/800px-Meerkat_feb_09.jpg')"></a>
<div class="appShopSummaryInfo">
<h3>title here...</h3>
<a href="#" class="appShopSummaryMoreInfoBtn"
>More Information</a>
</div>
</div>
<!-- ENDFOREACH -->
</div>