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

Question

我有两个 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 与父容器的边缘右对齐
#left 填充剩余空间。

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

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

JS Fiddle这里的现状 - http://jsfiddle.net/chandika/fVkzV/2/

有任何想法吗？

score 0 · Accepted Answer

如果您能够反转 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>

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

1 回答 1

Related

Reference