Question

我需要一个三列布局，其中第一个col宽度未知，并且只占用所需的空间。第二个col应该填充第一个和第三个之间的空格，内容应该有椭圆作为溢出。如果第二列的内容小于第一列和第三列之间的空间，则它应该右对齐。第三个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 */

CSS三列布局，包含未知的第一列和第二列

1 个答案: