xHTML / CSS：如何让内部div得到100％宽度减去另一个div宽度 [英] xHTML/CSS: How to make inner div get 100% width minus another div width

问题描述

我有两个嵌套的divs在外面的一个，它的宽度：100％。两个嵌套的div应该在一行，首先应该从它的内容得到它的大小：

 < div id =＃outer style =width：100％; border：1px> 
< div id =＃inner1style =border：1px; display：inline> 
 inner div 1.一些文本... 
< / div> 
< div id =＃inner2style =width：100％????; border：1px; display：inline> 
 inner div 2 ... 
< / div> 
< / div>问题是如何使＃inner2 div获得水平空间的剩余部分，如果＃inner1的宽度div没有指定，取决于里面是什么？
 
 
 
 PS 
 
 
 
我想要结果在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>一些文字< / div> 
< div class =captionLine> < / div> 
< / caption> 
< tr> 
< td> something< / td> 
< / tr> 
< / table> 
  
这是我想要的图片：
  
解决方案
神秘 overflow：hidden; 是你的朋友在这里。它会阻止浮动元素附近的元素延伸到浮动后面 - 我认为这是您正在寻找的布局。
 
 
 
这里有一些略微编辑的HTML：我不认为你可在 id 中具有＃字符：
 < div id =outer> 
< div id =inner1> 
 inner div 1.一些文本... 
< / div> 
< div id =inner2> 
 inner div 2 ... 
< / div> 
< / div> 
  
这里是CSS实现你想要的布局。
 
 
 
（我为HTML 6添加了CSS的HTML 条件注释 。我只是注意到你实际上不需要它在IE 6中工作，但如果你喜欢对IE 6用户很不错的...）
 < style type =text / css> 
 #outer {
 overflow：hidden; / *使#outer包含其浮动的子项* / 
 width：100％; 
 
 / *用于插图目的的颜色和边框* / 
 border：solid 3px＃666; 
 background：#ddd; 
} 
 
＃inner1 {
 float：left; / *使此div与其内容一样宽* / 
 
 / *颜色和边框插图目的* / 
 border：solid 3px＃c00; 
 background：#fdd; 
} 
 
＃inner2 {
 overflow：hidden; / *使此div占用水平空间的其余部分，不再有* / 
 
 / *用于插图目的的颜色和边框* / 
 border：solid 3px＃00c; 
 background：#ddf; 
} 
< / style> 
 
<！ -  [if lte IE 6]> 
< style type =text / css> 
＃inner2 {
 zoom：1; / *让这个div占用水平空间的其余部分，而不再是IE 6 * / 
} 
 
＃inner1 {
 margin-right：-3px; / *修复上一个规则引入的3像素差距。 （Shit这样是为什么Web开发人员恨IE 6）。* / 
} 
< / style> 
<！[endif]  - > 
  
在IE 6,7和8中测试和工作; Firefox 3.5;和Chrome 4。
 
I have 2 nested divs inside outer one, which has width:100%. Both nested divs should be in one line and first should get it size from it's contents:
<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>
Question is how to make #inner2 div to get rest of the horizontal space if width of the #inner1 div is not specified and depends on what it is inside?

P.S. All styles are in separate classes in my case, here I putted CSS into style attributes just for simplification.

I want result to work in IE7+ and FF 3.6

In more details for me it looks like this:
 <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>
Here is the image of what I want:
解决方案
The mysterious overflow: hidden; is your friend here. It stops elements adjacent to floats from extending behind the float — I think that’s the layout you’re looking for.

Here’s some slightly edited HTML: I don’t think you can have # characters in your ids:
<div id="outer">
    <div id="inner1">
        inner div 1. Some text...
    </div>
    <div id="inner2">
        inner div 2...
    </div>
</div>
And here’s the CSS to achieve the layout you want.

(I put in additional CSS for IE 6 with HTML conditional comments. I just noticed you didn’t actually need it to work in IE 6 too, but if you fancy being nice to the IE 6 users out there...)
<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]-->
Tested and working in IE 6, 7, and 8; Firefox 3.5; and Chrome 4.

                        
这篇关于xHTML / CSS：如何让内部div得到100％宽度减去另一个div宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！