元素在前面的元素不同时不出现？

huangapple
go评论74阅读模式
英文:

Element not appearing when previous elements are different?

问题

以下是翻译好的部分：

我有以下代码，显示了航班号旁边的时间。如果有多个航班号需要循环显示，那么时间元素将不再可见，因为它是一个单独的元素，不与前面的元素相关。我无法找到这种情况发生的原因。

时间不显示的代码：

<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;
}
英文:

I have the following code displaying a time next to a flight number. If there are multiple flight numbers to fade through, the time element, is no longer visible, when it is a separate element to what comes before. I cannot see any reason why this is the case.

Code where the time does not display:

&lt;div id=&#39;fltsmain&#39; class=&#39;cell  flts&#39; style=&#39;top:0px;position:absolute;&#39;&gt;
    &lt;div class=&#39;cell&#39; style=&#39;top:0px;position:absolute;&#39;&gt;
        &lt;div id=&#39;flts1&#39; class=&#39;cell flts fader1&#39;&gt;LM234&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&#39;cell&#39; style=&#39;top:0px;position:absolute;&#39;&gt;
        &lt;div id=&#39;flts0&#39; class=&#39;cell flts fader0&#39;&gt;FR1234&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&#39;cell time&#39;&gt;11:30&lt;/div&gt;

And code where the time does display:

&lt;div class=&#39;cell flts&#39; style=&#39;background-color:LightSlateGray;&#39;&gt;LG123&lt;/div&gt;


&lt;div class=&#39;cell time&#39;&gt;11:50&lt;/div&gt;

And the associated styles:

.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

得分: 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>

希望这对您有所帮助。

英文:

First, you should remove the absolute position of the element with id fltsmain, for the two elements showing the flight numbers only one is showing because of the absolute position, I changed it to relative to show them two, Apart from that I did some cleaning in you CSS as bellow:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-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;
}

<!-- language: lang-html -->

&lt;div id=&#39;fltsmain&#39; class=&#39;cell flts&#39;&gt;
    &lt;div class=&#39;cell&#39; style=&#39;top:0px;position:relative;&#39;&gt;
        &lt;div id=&#39;flts1&#39; class=&#39;cell flts fader1&#39;&gt;LM234&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&#39;cell&#39; style=&#39;top:0px;position:relative;&#39;&gt;
        &lt;div id=&#39;flts0&#39; class=&#39;cell flts fader0&#39;&gt;FR1234&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&#39;cell time&#39;&gt;11:30&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月9日 00:23:15
  • 转载请务必保留本文链接：https://go.coder-hub.com/75388762.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定