具有未知第一列和灵活第二列的 CSS 三列布局

Question

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

我在这里有一个工作示例，但它使用了一个讨厌的 hack 来让灵活的列具有任何宽度。 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 */