css - 在 DIV 中对齐 3 个文本(左、中、右)

Question

我正在尝试制作一种进度条，它会被填满，里面的文本在左边，在中间，有时在右边。

我(几乎)让它工作了，到目前为止我唯一的问题是有时中间的文本变得太长，所以它被跨越到 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。中间的文本太大，所以它跨越了 2 行，但还不足以填满整个栏。因为我为每个保留 33%:左、中和右文本，中心文本放在中间但它有一个“绑定(bind)”。

我不确定如何解决这个问题。谁能帮帮我？

谢谢，

鲁迪

Answer 1

您的 procressSize CSS 应该是:

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

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

编辑，但如果您希望 div 高度保持不变，请不要为 centerText div 使用 width:33% 并按照我提到的方式保持 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;
}

min-width 只是一个最小宽度，这样 div 就不会缩小到 33% 以下(但是在 IE6 下是不行的)