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

【问题标题】：Is it possible to fill the remaining width?是否可以填充剩余的宽度？
【发布时间】：2014-12-31 18:13:35
【问题描述】：

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

黑色矩形是获得相对宽度的容器。
绿色矩形显示<div> 或下面代码块中带有css 的其他元素。
红线显示设置的右侧 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>

【问题讨论】：

有很多方法可以做到这一点，通常很简单，但这完全取决于你的 HTML+CSS。你会做一个小提琴吗？

标签： css css-float

【解决方案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>

【讨论】：

谢谢！溢出锻炼很棒，当使用overflow:visible; 时，我也尝试使用hidden，但这给了我一些身高问题。

【解决方案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;
}

【讨论】：

【解决方案3】：

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

可以在css文件中定义

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

【讨论】：