xHTML/CSS:如何使内部div获得100%宽度减去另一个div宽度

Question

我在外部有一个嵌套的div,宽度为100%.两个嵌套的div应该在一行中,并且首先应该从它的内容中获取它的大小:

<div id="#outer" style="width:100%; border:1px">
  <div id="#inner1" style="border:1px; display:inline">
    inner div 1. Some text...
  </div>
  <div id="#inner2" style="width:100%????; border:1px; display:inline">
    inner div 2...
  </div>
</div>

问题是如果没有指定#inner1 div的宽度并且取决于它里面的内容,如何使#inner2 div获得水平空间的其余部分？

PS在我的情况下,所有样式都在单独的类中,这里我将CSS放入样式属性只是为了简化.

我希望结果在IE7 +和FF 3.6中工作

对我来说更多细节看起来像这样:

 <style type="text/css">
.captionText
{
 float:left;
} 

.captionLine
{
 height: 1px;
 background-color:black;
 margin: 0px;
 margin-left: 5px;
 margin-top: 5px;
 border: 0px;
 padding: 0px;
 padding-top: 1px;
}
 </style>
<table style="width:300px;">
<caption width="100%">
     <div class="captionText">Some text</div>
     <div class="captionLine"> </div>
</caption>
     <tr>
           <td>something</td>
     </tr>
</table>

这是我想要的图像:

Answer 1

神秘的overflow: hidden;是你的朋友.它会阻止浮子附近的元素延伸到浮子后面 - 我认为这是你正在寻找的布局.

这里有一些略微编辑过的HTML:我认为你的#角色里面没有人物id:

<div id="outer">
    <div id="inner1">
        inner div 1. Some text...
    </div>
    <div id="inner2">
        inner div 2...
    </div>
</div>

这是用于实现所需布局的CSS.

(我为IE 6添加了额外的CSS,带有HTML 条件注释.我只是注意到你实际上并不需要它在IE 6中工作,但是如果你喜欢那样的IE 6用户...)

<style type="text/css">
#outer {
    overflow: hidden;/* Makes #outer contain its floated children */
    width: 100%;

    /* Colours and borders for illustration purposes */
    border: solid 3px #666;
    background: #ddd;
}

#inner1 {
    float: left;/* Make this div as wide as its contents */

    /* Colours and borders for illustration purposes */
    border: solid 3px #c00;
    background: #fdd;
}

#inner2 {
    overflow: hidden;/* Make this div take up the rest of the horizontal space, and no more */

    /* Colours and borders for illustration purposes */
    border: solid 3px #00c;
    background: #ddf;
}
</style>

<!--[if lte IE 6]>
<style type="text/css">
#inner2 {
    zoom: 1;/* Make this div take up the rest of the horizontal space, and no more, in IE 6 */
}

#inner1 {
    margin-right: -3px;/* Fix the 3-pixel gap that the previous rule introduces. (Shit like this is why web developers hate IE 6.) */
}
</style>
<![endif]-->

在IE 6,7和8中测试并工作; Firefox 3.5; 和Chrome 4.