代码之家 › 专栏 › 技术社区 › Jacob Birkett

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

element position css html

Jacob Birkett · 技术社区 · 6 年前

我需要三个要素。两边有两个元素,中间有一个文本元素。中间的文本需要与第一个元素左对齐(浮动)。

## 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 没有帮助,因为它只是移动每个孩子到自己的路线。

2 回复 | 直到 6 年前

Gerard 6 年前

我用的是flexbox .container 并设置 flex: 1 .container-second . 这样可以删除所有浮动,并且文档流保持完整。

.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>

Shaiv 6 年前

这可以通过使用bootstap网格和CSS溢出以及文本溢出属性轻松完成。

看看这个。

.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>