Question

基于this post我试图让左边的div填满剩余的空间，左边和右边应该总是在一行中，右边的div应该是完全可见的。

如何做到这一点？

#left {
  width: 100%;
  background-color: #ff0000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  float: left;
}
#right {
  float: right;
  background-color: #00FF00;
}

<body>
  <div>
    <div id="left">
      left text should have the remaining width and shortended if it is too long lorem ipsum minion dolor
    </div>
    <div id="right">
      this text is dynamic - should be fully visibile
    </div>
  </div>
</body>

修改：

Flex-box回答不起作用。看起来如果绿色文字变短了：

我想要的是绿色div现在变小，当文本很短时。

Answer 1

如果您选择flexbox，这很容易 - 请参阅下面的演示：

将display: flex添加到您的包装并删除 float s
将white-space:nowrap添加到right

.wrapper {
  display:flex;
}
#left {
  width: 100%;
  background-color: #ff0000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex:1;
}
#right {
  background-color: #00FF00;
  white-space: nowrap;
}

<div class="wrapper">
  <div id="left">
    left text should have the remaining width and shortended if it is too long lorem ipsum minion dolor
  </div>
  <div id="right">
    this text is dynamic - should be fully visibile
  </div>
</div>

Answer 2

您可以使用 CSS Flexbox 。

使用var usCulture = new CultureInfo("en-US"); Thread.CurrentThread.CurrentCulture = usCulture; Thread.CurrentThread.CurrentUICulture = usCulture ;将父<div>设为灵活容器，并同时提供display: flex;＆amp; #left #right

请看下面的代码段：

flex: 1;

.holder {
  display: flex;
}

#left {
  flex: 1;
  background-color: #ff0000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#right {
  flex: 1;
  background-color: #00FF00;
}

希望这有帮助！

使左div填充剩余空间

2 个答案: