对齐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