0

我有两个 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;
   }

我需要

  1. #right 与父容器的边缘右对齐
  2. #left 填充剩余空间。

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

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

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

有任何想法吗？

4

1 回答 1

0

如果您能够反转 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>
于 2013-05-01T03:31:48.553 回答