我们有两个div的内容,第三个div是绝对位置的背景.
容器是一个flexBox.
Chrome和Safari都可以正常工作,但Firefox会计算绝对定位的div,并且在div之间分配空格,就像连续有3个div.
我做了jsfiddle的例子.有没有办法解决这个bug？
https://jsfiddle.net/s18do03e/2/
div.container {
display: flex;
flex-direction: row;
width: 100%;
height: 300px;
justify-content: space-between;
width: 100%;
outline: 1px solid;
}
div.c1 {
background: #aaeecc;
width: 100px;
position: relative;
z-index: 50;
top: 20px;
display: flex;
}
div.c2 {
background: #cceeaa;
width: 200px;
position: relative;
z-index: 50;
top: 20px;
display: flex;
}
div.bg {
background: #ccc;
width: 100%;
height: 100%;
z-index: 0;
left: 0px;
top: 0px;
position: absolute;
display: flex;
}
<div class="container"> <div class="c1">Content 1</div> <div class="c2">Content 2</div> <div class="bg">Background</div> </div>
解决方法
正在发生,因为合理内容：空格之间;均匀分配项目开始时的第一个项目,最后一个项目.所以只是putt< div class =“bg”> Background< / div>在< div class =“c1”>内容1< / div>之间和< div class =“c2”>内容2< / div>
喜欢这个
喜欢这个
<div class="container">
<div class="c1">Content 1</div>
<div class="bg">Background</div>
<div class="c2">Content 2</div>
</div>
你可以看到https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content的原因
