我用 display:flex
和 flex-direction: column-reverse;
创建了一个 div。
它在 Chrome 上运行良好,但在 Firefox 中 display:flex
不工作。
#team-messageid
{
height: 350px;
overflow: auto;
display: flex;
flex-direction: column-reverse;
}
<div id="team-messageid">
<div id="single-message;" style="background-color: #E8E8E8;border-radius:15px;margin-right: 24px;margin-left:24px;margin-bottom:1%;border-top-right-radius:0px;">
<div><span class="single-message" style="font-size:19px;float:right;padding: 1%;">Div 1</span><br></div>
</div>
<div id="single-message;" style="background-color: #E8E8E8;border-radius:15px;margin-right: 24px;margin-left:24px;margin-bottom:1%;border-top-right-radius:0px;">
<div><span class="single-message" style="font-size:19px;float:right;padding: 1%;">Div 2</span><br></div>
</div>
<div id="single-message;" style="background-color: #E8E8E8;border-radius:15px;margin-right: 24px;margin-left:24px;margin-bottom:1%;border-top-right-radius:0px;">
<div><span class="single-message" style="font-size:19px;float:right;padding: 1%;">Div 3</span><br></div>
</div>
<div id="single-message;" style="background-color: #E8E8E8;border-radius:15px;margin-right: 24px;margin-left:24px;margin-bottom:1%;border-top-right-radius:0px;">
<div><span class="single-message" style="font-size:19px;float:right;padding: 1%;">Div 4</span><br></div>
</div>
<div id="single-message;" style="background-color: #E8E8E8;border-radius:15px;margin-right: 24px;margin-left:24px;margin-bottom:1%;border-top-right-radius:0px;">
<div><span class="single-message" style="font-size:19px;float:right;padding: 1%;">Div 5</span><br></div>
</div>
<div id="single-message;" style="background-color: #E8E8E8;border-radius:15px;margin-right: 24px;margin-left:24px;margin-bottom:1%;border-top-right-radius:0px;">
<div><span class="single-message" style="font-size:19px;float:right;padding: 1%;">Div 6</span><br></div>
</div>
</div>
我找到了一些关于此的问答,但没有一个有效。
最佳答案
问题是您还没有确定它针对的是哪个浏览器。这就是 css 代码应该的样子。
#team-messageid {
height: 350px;
overflow: auto;
display: flex;
flex-direction: column-reverse;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
}
关于css - 显示 :flex is not working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50609726/