xHTML / CSS：如何使内部div获得100％的宽度减去另一个div的宽度

Question

我在外部一个内部有2个嵌套的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：我认为您#的ids中不能包含字符：<div id="outer">&nbsp; &nbsp; <div id="inner1">&nbsp; &nbsp; &nbsp; &nbsp; inner div 1. Some text...&nbsp; &nbsp; </div>&nbsp; &nbsp; <div id="inner2">&nbsp; &nbsp; &nbsp; &nbsp; inner div 2...&nbsp; &nbsp; </div></div>这是实现所需布局的CSS。（我为带有HTML 条件注释的 IE 6添加了其他CSS 。我只是注意到您实际上也不需要它在IE 6中也可以工作，但是如果您想对IE 6用户好一点的话...）<style type="text/css">#outer {&nbsp; &nbsp; overflow: hidden;/* Makes #outer contain its floated children */&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; /* Colours and borders for illustration purposes */&nbsp; &nbsp; border: solid 3px #666;&nbsp; &nbsp; background: #ddd;}#inner1 {&nbsp; &nbsp; float: left;/* Make this div as wide as its contents */&nbsp; &nbsp; /* Colours and borders for illustration purposes */&nbsp; &nbsp; border: solid 3px #c00;&nbsp; &nbsp; background: #fdd;}#inner2 {&nbsp; &nbsp; overflow: hidden;/* Make this div take up the rest of the horizontal space, and no more */&nbsp; &nbsp; /* Colours and borders for illustration purposes */&nbsp; &nbsp; border: solid 3px #00c;&nbsp; &nbsp; background: #ddf;}</style><!--[if lte IE 6]><style type="text/css">#inner2 {&nbsp; &nbsp; zoom: 1;/* Make this div take up the rest of the horizontal space, and no more, in IE 6 */}#inner1 {&nbsp; &nbsp; 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。

Answer 2

如果您现在正在阅读此书，则可以使用calc，请多谢。的HTML<div class="universe">&nbsp; <div class="somewidth">&nbsp; </div>&nbsp; <div class="everythingelse">&nbsp; </div></div>的CSS.universe {&nbsp; width: 100%;&nbsp; height: 100%;}.somewidth {&nbsp; width: 200px;&nbsp; height: 100%;}.everythingelse {&nbsp; width: 800px; /* fallback for emergencies */&nbsp; width: calc(100% - 200px);&nbsp; width: -moz-calc(100% - 200px);&nbsp; width: -webkit-calc(100% - 200px);&nbsp; height: 100%;}请参阅JSFiddle上的工作示例。

Answer 3

从您的代码看来，您正在尝试获取一条水平线以填充div中的空白区域。如果我是对的，那么您希望创建带有标记的视觉效果。如果我错了纠正我。（很高兴看到您想要的图像）例：Title ---------------------------orTitle: Caption ------------------这不是最佳实践。您应该尝试使用CSS达到这种效果。首先尝试使代码更具语义：<div id="#outer" style="width:100%; border:1px">&nbsp; <h3 style="border:1px; display:inline">&nbsp; &nbsp; Caption&nbsp; </h3></div>要获得这一行：用所需的颜色创建图像使它的高度与您希望线条以px为单位用background 属性定位。#outer h3 {display: inline;background-color: #000;color: #FFF;}#outer {width: 100%; /* is the default of block element but just for celerity */background: #000 url('image path') center left; /* position the image */}