我正在尝试使用不同的 flex 和 width 属性来对齐一些元素。在 Safari 和 Chrome 中,行为符合预期,但在 Firefox 中却并非如此。
即使您将元素的宽度设置为非常高的固定值,宽度属性似乎也会被忽略。
请参阅此处的示例: https://jsfiddle.net/wugrtwjc/
理想的行为是将两个 div 封装在彼此下方的“r-6”类中,两者都覆盖其父级的整个宽度(这在 Firefox 和 Chrome 中发生)。
在 Firefox 中,即使宽度设置为 100%,两个 div 也会彼此相邻对齐。您也可以尝试将此类的宽度设置为 10000px 之类的值,但它仍然只占用其父 div 的一半空间。
HTML 设置:
<div class="layout-row">
<div class="c-l-8">
<div class="layout-col h-800">
<div class="r-6">
<div class="one"></div>
</div>
<div class="r-6">
<div class="two"></div>
</div>
</div>
</div>
</div>
CSS:
.layout-row {
-webkit-flex-flow: row wrap;
width: 100%;
}
.layout-col {
-webkit-flex-flow: column wrap;
}
.layout-row, .layout-col {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.c-l-8 {
width: 66.66667%;
}
.r-6 {
width: 100%;
height: 50%;
}
.h-800 {
height: 800px;
}
.one, .two {
width: 100%;
height: 100%;
}
.one {
background: red;
}
.two {
background: blue;
}
最佳答案
试试这个代码
<style>
.layout-row,
.layout-col {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.layout-row {
flex-flow: row wrap;
width: 100vw;
}
.layout-col {
flex-flow: column wrap;
}
.c-l-8 {
width: 100%;
}
.r-6 {
width: 100%;
height: 50%;
}
.h-800 {
height: 800px;
}
.one,
.two {
width: 100%;
height: 100%;
}
.one {
background: red;
}
.two {
background: blue;
}
</style>
希望这有帮助..
保重并快乐编码
关于css - Firefox 在使用 flex 时忽略元素的宽度属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37204413/