使左 div 填充剩余空间答案

【问题标题】：Make left div fill the remaining space使左 div 填充剩余空间
【发布时间】：2016-11-17 09:03:06
【问题描述】：

基于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 现在变小，当文本很短时。

【问题讨论】：

你想要两个 div 在一行吗？为什么左 div 上没有浮动？
是的，完全是...向左添加浮动，没有帮助

标签： html css flexbox ellipsis

【解决方案1】：

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

将 display: flex 添加到您的包装器中并删除 floats
将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>

【讨论】：

似乎不起作用，请参阅我对问题的编辑和屏幕截图。

【解决方案2】：

您可以使用 CSS Flexbox。

使用display: flex; 将父级<div> 设为弹性容器并同时提供#left 和#right flex: 1;

看看下面的sn-p：

.holder {
  display: flex;
}

#left {
  flex: 1;
  background-color: #ff0000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#right {
  flex: 1;
  background-color: #00FF00;
}

<html>

<head>
  <title>This is My Page's Title</title>
</head>

<body>
  <div class="holder">
    <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>

</html>

希望这会有所帮助！

【讨论】：