是否有可能在div中有两个div,一个停靠在左边,一个在右边,这样当空间不可用时,一个会收缩吗？

我正在制作一个带面板的Web应用程序.在这个面板中,我想在左边有一个恒定大小的按钮,在右边有一些状态文本.当窗口缩小时,我希望停靠在右侧的文本缩小以适应所有内容.

例:

初始:

[[BUTTON] [Status text]]

收缩时:

[[BUTTON][Sta...]]

我知道实现这种对接的两种方式是:

制作Status textdiv position: absolute,但这会将它从流中取出而只会使它重叠

使用浮点数,但这会导致float:right元素在空间用完时换行到下一行

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

有办法吗？只关注现代浏览器.

如果您只需要支持现代浏览器,则可以使用flexbox.检查这个小提琴.

HTML:

  Button
  Some text here...

CSS:

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

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

我想这就是你要求的https://jsfiddle.net/DIRTY_SMITH/komfhjdj/7/

您可以通过许多不同的方式执行此操作,但我的示例中的两个关键属性是 white-space: nowrap;和overflow: hidden;

HTML

  
  

    Some text tttttt
  

CSS

.wrapper {
  width: 100%;
}

.button {
  width: 100px;
  float: left
}

.right {
  width: calc(100% - 100px);
  float: left;
  text-align: right;
  background-color: lightblue;
  white-space: nowrap;
  overflow: hidden;
}