對齊DIV中的3個文本（左，中，右）

Question

我正在嘗試製作一種進度條，裏面的文本位於左側，中間位置，右側是「有時間位置」。

我明白了（幾乎）正在工作，到目前爲止我唯一的問題是，有時中間的文本會變得太長，所以它會跨越div。這意味着它包裹了，並採取了2行，但主要股息仍然存在。

這是代碼，也許有人可以幫我解決這個問題，提高了一點：

<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

你procressSize CSS應該是：

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

這將增加的進展div的高度包含文本

編輯，但如果你想在div高度保持不變，沒有寬度：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中不起作用）

Answer 2

也許overflow:hidden結合height:1em將幫助？這將裁剪太長的文本。

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

Answer 3

對此問題使用float的替代方法是使用絕對和相對定位，我發現 - 我處於一種無需浮動的情況下需要這樣做，這幫助我解決了我的問題。

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