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

Question

我想填补剩余的宽度，例如：

• 黑色矩形是具有相对宽度的容器。
• 绿色矩形在下面的代码块中显示<div>或其他元素。
• 红线显示设置右侧div的结尾，下面是css。就像你可以看到我不希望它应该像它应该填补剩余的空间。

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

---

.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

有很多方法，一种方法是浮动第一个元素并在'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>

Answer 2

Demo

CSS

/* padding, margin and borders are added for representation only */

.container{
    width: 90%;
    border:5px solid black;
    padding:5px;
}
.first{
    float:left;
    background: #aaa;
    border:5px solid green;
    margin:2px;
    padding:2px;
}
.adjust{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background:#eee;
    border:5px solid green;
    margin:2px;
    padding:2px;
}

Answer 3

<div class="column1">
Short div
</div>
<div class="column">
Long Div
</div>

在css文件中你可以定义

.column1{ 
width:40%;
}
.column{
width:60%;
}