当前面的元素不同时元素不出现？答案

【问题标题】：Element not appearing when previous elements are different?当前面的元素不同时元素不出现？
【发布时间】：2023-02-09 04:32:40
【问题描述】：

我有以下代码在航班号旁边显示时间。如果有多个航班号要淡出，则时间元素不再可见，因为它是之前出现的元素的单独元素。我看不出为什么会这样。

不显示时间的代码：

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

【问题讨论】：

你应该删除位置：绝对来自第一个代码示例中的外部 div，或者将航班号和时间元素包装在父 div 中位置：相对为创建一个包含块位置：绝对元素。

标签： html css

【解决方案1】：

首先，你应该删除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>

【讨论】：