当两个 div 具有可变宽度时，展开一个 div 以使用剩余宽度答案

【问题标题】：Expand one div to use remaining width when both divs have variable widths当两个 div 具有可变宽度时，展开一个 div 以使用剩余宽度
【发布时间】：2013-05-01 11:31:48
【问题描述】：

我有两个 div，我无法预测每个 div 的宽度，必须内联显示。

<div id="container">
  <div id="left">Primary variable content</div>
  <div id="right">variable content</div>
</div>

目前的 CSS：

  #left, #right{
    display:inline-block;
   }

我需要

#right 与父级#container 的边缘右对齐
#left 填充剩余空间。

因此，#right 的所有内容都将显示出来，随后 #left 将有剩余空间来显示其内容。溢出可以被剪裁。

我不能在这里使用 float:right 因为它无助于满足要求 2。我不知道内容的宽度。

当前情况的 JS Fiddle - http://jsfiddle.net/chandika/fVkzV/2/

有什么想法吗？

【问题讨论】：

类似this
行得通！哇，就在我面前，没想到！
如果左边的 div 有更多的内容，它的危险在于它会环绕右边的 div，所以你可以在左边的 div 中添加overflow: hidden 来防止这种情况发生，如我的示例所示。

标签： css

【解决方案1】：

如果您能够颠倒 HTML 中 div 的顺序，这很容易：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
#container{
    border: 1px solid;
    padding: 2px;
}
#left{
    border: 1px solid #99CC00;
    overflow: hidden;
}

#right{
    display:inline-block;
    text-align: right;
    float: right;
    border: 1px solid #FFCC00
}
</style>

</head>
<body>

<div id="container">
    <div id="right">content, content</div>    
    <div id="left">some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here </div>

</div>

</body>
</html>

【讨论】：