如何并排放置两个div,其中一个尺寸合适,另一个占用剩余空间？

Question

这应该很容易......为什么这不容易？

我希望并排有两个div,其中一个div将自动调整内容的大小,第二个div将简单地填充剩余的宽度.如果它太大,我需要将'剩余宽度'div中的文本截断,因为我只能让这些div占用一行.

我一整天都在搜索,我发现的最接近的是这篇文章建议使用STILL没有解决问题的表格.

这是重现我的问题的jsfiddle代码:http://jsfiddle.net/ssawchenko/gMxWc/

我希望你们其中一个人可以帮助我!

=== CSS(Hacky)解决方案？===

显然添加负余量(必须保证足够大以覆盖正确的大小)将"起作用".这看起来很苛刻,但可能无法完全解决问题.如果我将jsfiddle窗口左右拖动以缩小和增长div,则会出现一些奇怪的现象,收缩文本似乎不会浮动在完整的右侧.

.right_part 
{
  margin-left:-1000px; 
  background:yellow;   
  float:right;
  white-space:nowrap;
} 

===完整的CSS解决方案===

最终找到了合适的CSS组合!

http://jsfiddle.net/ssawchenko/gKnuY/

我的错误是我错误地浮动了我的"适合"内容.通过将div移动到DOM中的正确位置,内容将正确浮动,"剩余大小"div现在将正确占用剩余空间.

我也想强制div占用一行,这就是为什么我在"剩余大小"的div内容上设置了如此严格的CSS.溢出:隐藏; 文本溢出:省略号;

Answer 1

#full_width_div {
    background-color:#5B8587;
    width:100%;
}
.left_part {
    background:red;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.right_part {
   background:yellow;   
   float:right;
   white-space:nowrap;
}

<div id="full_width_div">
  <div class="right_part">
     Size to fit me completely
  </div>
  <div class="left_part">
     I am long and should be truncated once I meet up with the size to me text.
  </div>    

  <div style="clear:both;" />
</div>

我的错误是我错误地浮动了我的"适合"内容.通过将div移动到DOM中的正确位置,内容将正确浮动,"剩余大小"div现在将正确占用剩余空间.

我也想强制div占用一行,这就是为什么我在"剩余大小"的div内容上设置了如此严格的CSS.溢出:隐藏; 文本溢出:省略号;