我有下面的代码在航班号旁边显示一个时间。如果有多个航班号要淡出,那么时间元素就不再可见,因为它是之前出现的元素的一个单独元素。我看不出为什么会出现这种情况。
不显示时间的代码:
<div id='fltsmain' class='cell flts' style='top:0px;position:absolute;'>
<div class='cell' style='top:0px;position:absolute;'>
<div id='flts1' class='cell flts fader1'>LM234</div>
</div>
<div class='cell' style='top:0px;position:absolute;'>
<div id='flts0' class='cell flts fader0'>FR1234</div>
</div>
</div>
<div class='cell time'>11:30</div>
和显示时间的代码:
<div class='cell flts' style='background-color:LightSlateGray;'>LG123</div>
<div class='cell time'>11:50</div>
以及相关样式:
.cell{
display: table-cell;
vertical-align: middle;
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
height: 100px;
max-height: 100px;
font-size: 50px;
font-weight: normal;
font-style: normal;
}
.flts{
left: 238px;
width: 250px;
color: White;
text-align: left;
background-color: SkyBlue;
}
.time{
left: 488px;
width: 200px;
color: White;
text-align: center;
}
1条答案
按热度按时间8zzbczxx1#
首先,您应该删除id为
fltsmain
的元素的absolute
位置,对于显示航班号的两个元素,由于absolute
位置,只有一个显示,我将其更改为relative
以显示这两个元素,除此之外,我在CSS
中做了一些清理,如下所示: