html - 强制 div 始终位于另一个元素的右侧？

Question

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

如何确保正确的 div 保留在原位并仅 overflow hidden 文本？

---

<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 而不是 float 并在父级上设置 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>