在DIV中对齐3个文本（左，中和右）

Question

我正在尝试制作一种填充了进度条的程序，其内部的文本在左侧，中间，而SOMETIMES在右侧。

我（几乎）使它工作了，到目前为止，我唯一的问题是有时中间的文本太长，因此它超出了div。 意思是它回绕，需要2条线，但是在主div中仍然存在。

这是代码，也许有人可以帮助我解决此问题并进行一些改进：

<div class="progress progressSize">
    <div style="width: 50%;" class="progressFill"></div>
    <div class="progressText">
        <span class="leftText">Left Text</span>
        <span class="centerText">Center text that gets too long</span>
        <span class="rightText">Right Text</span>
    </div>
</div>

对于CSS：

.progress {
    border: 1px solid #004b91;  
    background-color: #FFFFFF;
    position: relative;
}

.progressSize {
    width: 500px;
    height: 20px;
}

.progressFill {
    background-color: #EAF3FE;
    height: 100%;
    position: absolute;
}

.progressText {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    position: relative;
}

.leftText {
    float: left;
    width: 33%;
}

.centerText {
    float: left;
    text-align: center;
    width: 33%;
}

.rightText {
    float: right;
    text-align: right;
}

所以我的问题是centerText。 中间的文本太大，因此横跨两行，但不足以填满整个栏。 因为我为左，中间和右文本各保留33％的内容，所以将中心文本放在中间，但它就像一个“绑定”。

我不确定该如何解决。 谁能帮我吗？

谢谢，

鲁迪

Answer 1

我发现使用浮点数的另一种方法是使用绝对和相对定位，我处于一种需要不使用浮点数的情况，这已经帮助我解决了问题。

http://www.bennadel.com/blog/2541-most-css-floats-can-be-replaced-with-relative-and-absolute-positioning.htm

Answer 2

也许overflow:hidden结合height:1em会有所帮助？ 这将裁切太长的文本。

.centerText {
  float: left;
  text-align: center;
  width: 33%;
  overflow:hidden;
  height: 1em;
}

Answer 3

您的procressSize CSS应该是：

.progressSize {
    width: 500px;
    min-height:20px;
    height: auto;
    overflow:auto;
}

这将增加进度div的高度以包含文本

编辑，但如果您希望div高度保持不变，请不要为width设置width：33％的centerText div，并按照我前面提到的方式保留progressSize CSS

.progressSize {
    width: 500px;
    min-height:20px;
    height: auto;
    overflow:auto;
}

.centerText {
    float: left;
    text-align: center;
    min-width: 33%; // initially, width:33%
    height:auto;
}

最小宽度只是最小宽度，因此div不会缩小到33％以下（但在IE6中将无法使用）