Question

我有两个div，其中包含相互堆叠的文字。底部文字为灰色，顶部文字为红色。我希望能够指定我想用CSS显示的顶部红色div部分的百分比。使用width: x%时，显示的顶部div的百分比是相对于整行而不是内容（文本）。我想知道完成我想要的CSS修复。

http://jsfiddle.net/8oodus0n/

<div class="text-container">
    <span class="text-grey">
        We love Stack Overflow
    </span>
    <span class="text-color">
        We love Stack Overflow
    </span>
</div> 

.text-grey, .text-color{
    position: absolute;
    font-size: 18px;
    font-family: arial;
    font-weight: 800;
}

.text-grey{
    color: grey;
}

.text-color{
    color: red;
    overflow-x: hidden;
    width: 20%;
    white-space:nowrap;
}

Answer 1

一种方法是相对定位父.text-container元素，然后将display更改为inline-block。在这样做时，元素的宽度将由其内容确定，在本例中为文本。因此，子span元素的宽度将遵循父级的最大宽度。

为了使其正常工作，span元素中只应有一个绝对定位。这样做的原因是因为绝对定位的元素基本上从正常流中移除，因此如果两个元素都是绝对定位的，则父元素的宽度为0。因此，需要正常定位其中一个元素，以便确定父元素的宽度。

.text-color {
    position: absolute;
    left: 0;
    top: 0;
}
.text-container {
    position: relative;
    display: inline-block;
}

Updated Example

.text-container {
    position: relative;
    display: inline-block;
}
.text-grey, .text-color {
    font-size: 18px;
    font-family: arial;
    font-weight: 800;
}
.text-grey {
    color: grey;
}
.text-color {
    position: absolute;
    left: 0;
    top: 0;
    color: red;
    overflow-x: hidden;
    width: 50%;
    white-space:nowrap;
}

CSS - 以％为单位设置跨度的宽度相对于其最大宽度

1 个答案: