Javascript 文本仍被包装在其中'；s父div-CSS，React

这个问题非常直截了当，我读过很多关于同一问题的帖子，尽管在我的具体案例中，所有这些解决方案都不起作用，因为我可能处理错了，或者使问题变得过于复杂

我尝试过的一些解决方案：

大多数文章得出的结论是，您应该将

内联块

与

空白：nowrap

结合使用。虽然经过无数次的尝试和错误，我实际上有点忘记了我做了什么，也没有尝试过

我的具体案例

我有一个

React

应用程序，我想在其中显示一个

hours条

。此栏有一种（某种）

表格布局

，但只有一行。该条由15个单元格组成（

div的

）

问题

当满足某个条件时，每个单元格上方都应该有一个特定的文本。例如，我想在起始单元格div和结束单元格div上显示一个文本值，然后再在每个第5个单元格上显示一个文本值。它应该是这样的：

我想我可以通过在时间条主体内创建一个“时间”

行来实现这一点，但是当我将其作为单独的行添加时，时间/文本将永远不会高于正确的单元格。当时间条在屏幕上有多行时，您将得到如下结果：


因此，我的下一个想法是在行中创建两个单独的div，其中1个div（顶部div）用作标题，第二个div用作实际的条：

<TimeColumnBody>        
    <TimeColumnHeader>
        {(() => {
            if (item.showtime === true)
            {
                return <Test>{item.name}</Test>
            }
        })()}
    </TimeColumnHeader>
    <TimeColumn
        key={item.key} 
        name={item.name}
    >
    </TimeColumn>
</TimeColumnBody>

在
React render
部分中创建整个表/时间条：

render() {
        return (
                <TimeContainer>
                    <TimeRow>
                        {this.renderTimeTable()}
                    </TimeRow>
                </TimeContainer>
        );      
    }

我现在没有主意了，希望有人能找到更好的解决办法

更新

添加了一个代码笔：
问题最初似乎与溢出或包装有关，但实际上是一个z索引问题-因为您在浮动
。TimeColumnBody
左侧，每个后续元素的z索引都比上一个元素高，因此与上一个项目重叠。我只需在第一次添加一个
span
，就可以解决这个问题：

.TimeColumnHeader span {
   position: absolute;
}

请参阅pen:
您是否有html代码来复制最后一个屏幕截图？与您的问题无关，但您可以通过执行
{item.showtime&&{item.name}
并删除其中的代码来优化
TimeColumnHeader
标记内的内容。每次呈现特定部分时，您都在创建、调用和销毁函数。谢谢Sergio Moura，这样的提示总是受欢迎的，因为我还是个新手！HTML发布在主帖子的底部。将所有内容放入一个公共代码笔中，以便我们可以在其中玩：）根据要求，代码笔：还在主帖子中添加了代码笔。干杯！这就解决了：）
<div class="App" style="text-align: center; height: 100%; overflow: auto;">
    <div class="Nav-LeftPane" style="width: 15%; height: 100%; position: fixed; box-sizing: border-box; overflow-y: auto; float: left;">...</div>
    <div class="content" style="width: 85%; height: 100%; text-align: center; overflow: hidden; float: right;">
        <div class="content-timebar" style="padding-left: 1%; padding-right: 1%; padding-top: 3%; height: 100%;">
            <!-- The actual Time Bar : --> 
            <div class="TimeContainer" style="width: 100%; height: 10%;">
                <div class="TimeRow" style="height: 100%;"> <!-- This div also has some :after logic: .TimeRow::after { content: ""; clear: both; display: table; } -->
                    <!-- the cell part which gets generated 15 times -->
                    <div class="TimeColumnBody" style="width: 2.222%; height: 100%; float: left;">
                        <div class="TimeColumnHeader" style="display: flex; align-items: flex-end; height: 50%; background-color: blue; color: white; white-space: nowrap;">
                            08:00
                        </div>
                        <div class="TimeColumn" style="height: 50%; background-color: red;"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

.TimeColumnHeader span {
   position: absolute;
}