使行中三个元素的中间填充剩余空间答案

【问题标题】：Make middle of three elements in row fill remaining space使行中三个元素的中间填充剩余空间
【发布时间】：2018-09-23 09:45:09
【问题描述】：

我需要三个元素。两侧有两个元素，中间有一个文本元素。中间的文本需要左对齐（浮动）到第一个元素。

当页面缩小时，我需要用省略号截断文本。但是在指定溢出样式后，当页面缩小到小于三个组合的宽度时，它们开始移动到新位置并移出父容器。

如果宽度不能容纳所有元素，## This is sample text! ## 将变成## This is samp... ##（其中## 是侧元素）。

.container {
  height: 30px;
  background-color: #ff0000;
}

.container > .container-first {
  display: inline-block;
  background-color: #0000ff;
  width: 20px;
  height: 30px;
  float: left;
}

.container > .container-second {
  display: inline-block;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  float: left;
}

.container > .container-third {
  display: inline-block;
  background-color: #00ff00;
  width: 20px;
  height: 30px;
  float: right;
}

<div class="container">
  <div class="container-first"></div>
  <div class="container-second">This one has sample text!</div>
  <div class="container-third"></div>
</div>

请注意，this answer 没有帮助，因为它只是将每个孩子移动到自己的行。

【问题讨论】：

标签： html css position element

【解决方案1】：

我为.container 使用了一个弹性框，并为.container-second 设置了flex: 1。这样一来，所有的浮动都可以被移除，并且文档流保持不变。

希望这会有所帮助。

.container {
  height: 30px;
  background-color: #ff0000;
  display: flex;
}

.container>.container-second {
  flex: 1;
}

.container>.container-first {
  display: inline-block;
  background-color: #0000ff;
  width: 20px;
  height: 30px;
}

.container>.container-second {
  display: inline-block;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.container>.container-third {
  display: inline-block;
  background-color: #00ff00;
  width: 20px;
  height: 30px;
}

<div class="container">
  <div class="container-first"></div>
  <div class="container-second">This one has sample text!This one has sample text!This one has sample text!This one has sample text!This one has sample text!</div>
  <div class="container-third"></div>
</div>

【讨论】：

比我希望的还要简单。谢谢。

【解决方案2】：

这可以通过使用引导网格和 CSS 溢出以及文本溢出属性轻松完成。您需要在 head 部分链接引导文件。

看看这个。

.ellipsis {
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

  <div class="container-fluid">
    <div class="row">
        <div class="col-md-4 col-xs-3">
          <div>Hello Hello</div>
        </div>
        <div class="col-md-4 col-xs-6">
          <div class="ellipsis">Hello Hello Hello Hello Hello Hello </div>
        </div>
        <div class="col-md-4 col-xs-3">
          <div>Hello Hello</div>
        </div>
    </div>
  </div>

【讨论】：

Bootstrap 绝不是可以通过其他方式相当容易解决的问题的答案。 Bootstrap 之类的东西可以在构建整个站点时使事情变得更容易，而不是为一个问题添加依赖项。
是的，但这只是另一种方式，因为使用 flex-box 已经得到了回答。