CSS float：left和溢出：可見的截斷文本

Question

我目前正在嘗試在javascript中使用一些div中的數字值來表示顏色漸變，以表示比例。 但是，我注意到使用較大的值時，由於float：left而使數字被截斷。 我也嘗試過使用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

演示

使用內聯塊

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

Answer 2

如果希望文本與以下div重疊，則必須給它們position:absolute;

<div style="position: relative; overflow: visible; width: 600px; height: 30px;white-space: nowrap;">
    <div class="column" style="background-color:red;">
        <div class="textontop">texts</div>
    </div>
    <div class="column" style="background-color:green;"></div>
    <div class="column" style="background-color:red;">
        <div class="textontop">texts</div>
    </div>
    <div class="column" style="background-color:green;"></div>
    <div class="column" style="background-color:red;">
        <div class="textontop">texts</div>
    </div>
</div>

CSS：

.column {
    width:20px;
    height:100%;
    overflow: visible;
    float:left;
    z-index:0;
}

.textontop {
    position:absolute;
    z-index:999;
}

Jsfiddle： http : //jsfiddle.net/y3LTZ/5/