html - CSS三列布局，第一列和第二列不明

我需要一个三列布局，其中第一个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：/

最佳答案

您应该学习“ 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 */

关于html - CSS三列布局，第一列和第二列不明，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36623126/