DEMO

Question

我目前正在尝试在javascript中创建颜色渐变，其中一些div中的数值表示为比例。但是，我注意到值越大，数字因浮动而被切断：左边。我也尝试过使用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

使用内联块

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/

CSS float：left和overflow：可见切断文本

2 个答案:

DEMO