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 */