javascript - 是否可以在一个 div 中有两个 div，一个停靠在左边，一个停靠在右边，这样当空间不可用时，一个会缩小？

Question

我正在制作一个带有面板的网络应用程序。在这个面板中，我想在左侧有一个固定大小的按钮，在右侧有一些状态文本。当窗口缩小时，我希望停靠在右侧的文本缩小以容纳所有内容。

示例:

初始:

[[BUTTON] [状态文本]]

收缩时:

[[BUTTON][Sta...]]

我知道获得这种对接的两种方法是:

• 使 Status text div position: absolute，但这会使它脱离流程，只会使其重叠
• 使用 float ，但这会导致 float:right 元素在空间用完时换行到下一行

我正在寻找一种尽可能利用浏览器定位引擎而不是手动计算的解决方案。

有办法吗？只关心现代浏览器。

Answer 1

如果您只需要支持现代浏览器，您可以为此使用 flexboxes。检查this fiddle .

HTML:

<div>
  <button>Button</button>
  <span>Some text here...</span>
</div>

CSS:

div {
  display: flex;
  justify-content: space-between;
}

span {
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}