css - 是否可以填充剩余的宽度？

Question

我想填充剩余的宽度，例如:

• 黑色矩形是有相对宽度的容器。
• 绿色矩形显示 <div>或下面代码块中带有 css 的其他元素。
• 红线显示了带有下面 css 的设置的右侧 div 的末尾。如您所见，我不希望它填满剩余空间。

那么如果所有内容都小于容器，如何填充剩余空间呢？

---

.wrapper {
  display:block;
  text-align:center;
}
.container {
  display:inline-block;
  background-color:black;
  
  width:100%;
  max-width:600px;
}
.column {
  color:white;
  background-color:green;
  
  float:left;
  width:auto;
  display:inline-block;
}

<div class="wrapper">
  <div class="container">
      <div class="column">
        Short text
      </div>
      <div class="column">
        <span>Long text</span>
    </div>
  </div>
</div>

Answer 1

有很多方法，一种是 float 第一个元素并在'stretch'列上应用overflow:hidden以强制它占据剩余空间。

.column:first-of-type {
  background: green;
  float: left;
}

.column:last-of-type {
  background: red;
  overflow: hidden;
}

<div class="column">
  Short text
</div>
<div class="column">
  Long text
</div>

或者...您可以使用 CSS 表格:

.container {
  display: table;
  width: 100%;
}
.column {
  display: table-cell;
}
.column:first-child {
  background: green;
  white-space: nowrap;
  width: 1%;
}
.column:last-child {
  background: red;
}

<div class="container">
  <div class="column">
    Short text
  </div>
  <div class="column">
    Long text
  </div>
</div>