强制div始终保持在另一个元素的右边？

Question

在下面的示例中，我有两个div相邻浮动，当右侧div的内容小于可用宽度时，它们可以正常工作。 一旦变大，div就会放在左div下方。

如何确保正确的div保留在原位，并且仅隐藏溢出文本？

---

<div class="parent" width="50px>
    <div class="left">
        Name:
        </br>
        Age:
    </div>
    <div class="right">
        Nero Oliver Paul Quincy Randolph Sherman Thomas Uncas Victor
        </br>
        19
    </div>
</div>

---

.parent {
    display: block;
    overflow: hidden;
}

.left {
    display: block;
    text-align: right;
    float: left;
    font-size: 12px;
    line-height: 14px;
}

.right {
    display: block;
    text-align: left;
    float: left;
    padding-left: 5px;
    overflow: hidden;
    font-size: 12px;
    line-height: 14px;
}

Answer 1

使用display: inline-block而不是浮点数，并在父级上设置white-space: nowrap

 .parent { overflow: hidden; white-space: nowrap; } .left { display: inline-block; font-size: 12px; line-height: 14px; } .right { display: inline-block; padding-left: 5px; font-size: 12px; line-height: 14px; } 

 <div class="parent" width="50px"> <div class=" left "> Name: <br> Age: </div> <div class="right "> Nero Oliver Paul Quincy Randolph Sherman Thomas Uncas Victor <br> 19 </div> </div>