html - CSS 三列布局，第一列未知，第二列灵活

Question

我需要一个三列布局，其中第一列宽度未知，并且只占用所需的空间。第二个 col 应该填充第一个和第三个之间的空间，内容应该有省略号作为溢出。如果第二列的内容小于第一列和第三列之间的空间，则应右对齐。第三列宽度已知/固定。

我这里有一个工作示例，但它使用了一个讨厌的技巧来让灵活的列具有任意宽度。 http://jsfiddle.net/ew65G/638/

.col1 { 
  background-color: #ddf; 
  float: left;
  height: 65px;
}
.col2 { 
  position: relative;
  background-color: green; 
  float: none;
  height: 65px;
  overflow: hidden;
  display: table-cell;
  min-width: 100%;
}
.col2 span {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 99%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
}
/* col3 has a known width */
.col3 { 
  background-color: cyan; 
  float: right;
  height: 65px;
}

<div class="col1">Column1 has to be flexible</div>
<div class="col3">Column3</div>
<div class="col2"> 
  <div>
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
  </div> 
  <span>
    This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences.
  </span>
</div>

谁能提出更好的方法？

我正在使用 sass，如果需要，html 结构是灵活的。我还需要支持 IE10 :/

Answer 1

你应该学习“css flexbox”模型。这是 fiddle

.root {  display:flex;}
.col1 { } /*takes up as much space as is needed*/
.col2 { flex:1;} /*take all remaining space */
.col3 { width:65px;} /*fixed width, no resize */