Javascript 如何使用css自动调整水平线DIV的大小？

我有一条小时到小时的水平线（也使用），它是使用多个元素创建的，如下图所示：

不幸的是，每次我确实缩小时，行不能自动调整大小，不能响应，但会被打断。我已尝试更改

行-0的属性
宽度：100%
或自动，并添加
溢出：隐藏但它不起作用


HTML：

<div class="hour">
    <div id="1" class='fl'>
            <div id="this_hour" class='fl kurohige-prev jaman' data-time="11">00:00-01:00</div>
            <div class='fl line-0'></div>                   
    </div>
    <div id="2" class='fl'>
            <div id="this_hour" class='fl kurohige-prev jaman' data-time="11">01:00-02:00</div>
            <div class='fl line-0'></div>                   
    </div>
    <div id="3" class='fl'>
            <div id="this_hour" class='fl kurohige-prev jaman' data-time="11">02:00-03:00</div>
            <div class='fl line-0'></div>                   
    </div>  
    <div id="4" class='fl'>
            <div id="this_hour" class='fl kurohige-prev jaman' data-time="11">03:00-04:00</div>
            <div class='fl line-0'></div>                   
    </div>  
</div>

有人对此有什么建议或解决办法吗？
我是否需要使用引导来解决此问题

在此之前谢谢…
如果您喜欢并且您的浏览器支持允许，您可以使用
flexbox
解决方案满足您的需要（您可以通过@css-tricks.com查看一个不错的
flexbox
参考资料）

编辑：：

我将下面的代码片段放在一起，也可以在jsbin上看到


*{
框大小：边框框；
}
身体{
填充：0；
保证金：0；
}
.时报{
填充：20px；
背景色：#f00；
显示器：flex；
对齐项目：居中；
证明内容：中心；
列表样式：无；
}
.时间{
文本对齐：居中；
位置：相对位置；
最小宽度：20%；
显示器：flex；
证明内容：中心；
位置：相对位置；
溢出：隐藏；
}
时间：在，
.times\uuu时间：之后{
位置：绝对位置；
内容：''；
最高：50%；
利润上限：-0.5px；
边框：1px纯白；
}
.times\uuu时间：之前{
左：0；
右：50%；
/*这必须是标签大小的一半*/
右边距：12.5px；
}
.times\uuu时间：之后{
右：0；
左：50%；
/*这必须是标签大小的一半*/
左边距：12.5px；
}
.times\u时间：类型的第一个：before，
.times\u时间：类型的最后一个：之后{
边界：无；
}
.time\uu时间标签{
高度：25px；
宽度：25px；
线高：25px；
文本对齐：居中；
边框：1px实心#000；
边界半径：100%；
颜色：#fff；
}

A.
B
C
Hey@user2226388，您需要支持哪些浏览器？@jh3y，我在使用Chrome…为什么不使用一条由图像背景组成的无限行（重复-x）？Hi@jh3y，如何将
更改为？可能吗？因为我想使用neednested…Hi@jh3y，所以我用div修改了它，但是span（line）streak div是透明的。如中所示，如何解决这个问题？我在回答中更新了snippet和jsbin链接，以使用CSS伪元素。这应该会帮助你走出困境，获得想要的行为。如果这为您解决了问题，请将其标记为已接受。希望能有帮助：D
.kurohige {
    border: 1px solid #fff;
    border-radius: 20px;
    color: #ffffff;
    font-family: "am";
    font-size: 18px;
    padding: 7px 10px;
    text-align: center;
}

.fl {
    float: left;
}

.line-0 {
    background: #ffffff none repeat scroll 0 0;
    height: 2px;
    margin: 18px 0; 
    width: 100px;
    overflow:hidden;
}