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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

1 个答案: