在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中將無法使用）