我有几个div被称为项目。它们与柔性盒一起使用。 在这些项目中,我想要一个具有完全相同尺寸的div。 但由于某种原因,它们与容器的尺寸相同。
我如何让.background-img
与.item
具有相同的尺寸?
点击时的转换仍然可以像现在一样工作。
HTML:
<div class="container">
<div class="item" style="background: red"><div class="background-img"></div></div>
<div class="item" style="background: green"><div class="background-img"></div></div>
<div class="item" style="background: blue"><div class="background-img"></div></div>
<div class="item" style="background: purple"><div class="background-img"></div></div>
</div>
JS:
$(".item").click(function() {
var focused = $(this).hasClass("focused");
if (!focused) {
$(".item").not(this).each(function() {
$(this).addClass("collapse");
});
$(this).addClass("focused");
}
else {
$(".item").removeClass("collapse");
$(this).removeClass("focused");
}
});
css:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
.container {
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
display: flex;
flex-direction: column;
height: 100%;
}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
height: 100%;
transition: all 0.5s;
overflow: hidden;
}
.collapse {
height: 0%;
}
.focused {
}
.background-img {
/* not this */
position: relative;
width: 100%;
height: 100%;
}
答案 0 :(得分:0)
在您的.item
.item {
position: relative;
}
然后将位置绝对置于.background-img
,所有侧为0
.background-img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
现在将跟随他的父母。