css 当以前的元素不同时,元素不出现?

2uluyalo  于 2023-02-10  发布在  其他
关注(0)|答案(1)|浏览(117)

我有下面的代码在航班号旁边显示一个时间。如果有多个航班号要淡出,那么时间元素就不再可见,因为它是之前出现的元素的一个单独元素。我看不出为什么会出现这种情况。
不显示时间的代码:

<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;
}
8zzbczxx

8zzbczxx1#

首先,您应该删除id为fltsmain的元素的absolute位置,对于显示航班号的两个元素,由于absolute位置,只有一个显示,我将其更改为relative以显示这两个元素,除此之外,我在CSS中做了一些清理,如下所示:

.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;
    padding: 5px;
}

.flts{
    width: 250px;
    color: White;
    text-align: left;
    background-color: SkyBlue;
}

.time{
    width: 200px;
    color: #000;
    text-align: center;
}
<div id='fltsmain' class='cell flts'>
    <div class='cell' style='top:0px;position:relative;'>
        <div id='flts1' class='cell flts fader1'>LM234</div>
    </div>
    <div class='cell' style='top:0px;position:relative;'>
        <div id='flts0' class='cell flts fader0'>FR1234</div>
    </div>
</div>

<div class='cell time'>11:30</div>

相关问题