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

    <div id="inner1">

        inner div 1. Some text...

    </div>

    <div id="inner2">

        inner div 2...

    </div>

</div>

这是实现所需布局的CSS。

（我为带有HTML 条件注释的 IE 6添加了其他CSS 。我只是注意到您实际上也不需要它在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。

Answer 2

如果您现在正在阅读此书，则可以使用calc，请多谢。

的HTML

<div class="universe">

  <div class="somewidth">

  </div>

  <div class="everythingelse">

  </div>

</div>

的CSS

.universe {

  width: 100%;

  height: 100%;

}

.somewidth {

  width: 200px;

  height: 100%;

}

.everythingelse {

  width: 800px; /* fallback for emergencies */

  width: calc(100% - 200px);

  width: -moz-calc(100% - 200px);

  width: -webkit-calc(100% - 200px);

  height: 100%;

}

请参阅JSFiddle上的工作示例。

Answer 3

从您的代码看来，您正在尝试获取一条水平线以填充div中的空白区域。如果我是对的，那么您希望创建带有标记的视觉效果。如果我错了纠正我。

（很高兴看到您想要的图像）

例：

Title ---------------------------

or

Title: Caption ------------------

这不是最佳实践。您应该尝试使用CSS达到这种效果。

首先尝试使代码更具语义：

<div id="#outer" style="width:100%; border:1px">

  <h3 style="border:1px; display:inline">

    Caption

  </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 */

}