javascript - CSS float :left and overflow:visible cutting off text

Question

我目前正在尝试在 javascript 中使用一些 div 中的数值来表示颜色渐变以表示为比例。但是，我注意到对于较大的值，数字会由于 float:left 而被 chop 。我也试过使用 display:inline-block，但它似乎有奇怪的定位并且在它们之间留下了间隙。我需要将 div 齐平，但只是让文本溢出到下面的 div 之上。有办法做到这一点吗？

我提到的两个例子都在这里:

http://jsfiddle.net/y3LTZ/3/

<div style="overflow: visible; width: 600px; height: 30px;white-space: nowrap;">
    <div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:red;">texts</div>
    <div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:green;"></div>
    <div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:red;">texts</div>
    <div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:green;"></div>
    <div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:red;">texts</div>
</div>

和

<div style="overflow: visible; width: 600px; height: 30px;white-space: nowrap;">
    <div style="width: 20px;height:100%;float:left;background-color:red;">texts</div>
    <div style="width: 20px;height:100%;float:left;background-color:green;"></div>
    <div style="width: 20px;height:100%;float:left;background-color:red;">texts</div>
    <div style="width: 20px;height:100%;float:left;background-color:green;"></div>
    <div style="width: 20px;height:100%;float:left;background-color:red;">texts</div>
</div>

谢谢!

Answer 1

DEMO

使用内联 block

HTML

<div class="wrapper">
    <div class="single-block red">texts</div>
    <div class="single-block green"></div>
    <div class="single-block red">texts</div>
    <div class="single-block green"></div>
    <div class="single-block red">texts</div>
</div>

CSS

.wrapper{
    width: 600px; 
    height: 30px;
    white-space: nowrap;
    font-size:0;
}
.single-block{
   width:20px;
   height:100%;
   display:inline-block;
   vertical-align:bottom;
    font-size:16px;
}
.red{
    background-color:red;
    position:relative;
}
.green{
    background-color:green;
}