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

Question

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

例:

初始:

[[BUTTON] [Status text]]

收缩时:

[[BUTTON][Sta...]]

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

• 制作Status textdiv position: absolute,但这会将它从流中取出而只会使它重叠
• 使用浮点数,但这会导致float:right元素在空间用完时换行到下一行

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

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

Answer 1

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

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

Answer 2

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

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

HTML

<div class="wrapper">
  <input class="button" type="button" value="button">
  <div class="right">
    Some text tttttt
  </div>
</div>

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