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将与父级#container
#left填补剩余空间。

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

我不能使用float：就在这里，因为它无法帮助达到要求2.我不知道内容的宽度。

JS当前形势的小提琴 - http://jsfiddle.net/chandika/fVkzV/2/

有什么想法吗？

Answer 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>

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

1 个答案: