一个浮动div与AUTO，然后另一个div填补其余部分

Question

我需要把两个div放在另一个里面。里面的Div是浮动的，一个有“width：auto;”而另一个必须填补其余部分。

我见过很多例子，但是一切都适用于至少一个固定宽度，我不使用固定宽度。

结构如下：

<div id="bigboss">
 <div id="child1"></div>
 <div id="child2"></div>
</div>

“bigboss”有一个“宽度：100％”，“child1”有“width：auto;”我需要孩子2填补其余部分。

Answer 1

CSS没有功能'填补其余部分'。你可能需要javascript。

您可以使用jQuery执行以下操作：

$(document).load(function(){
    $("#child2").css({
        "width": $("#bigboss").width() - $("#child1").width() + "px"
    });
});

如此处所示：http://jsfiddle.net/YUjJ8/

Answer 2

我认为在CSS2中没有简单的方法可以做到这一点。但是你可以使用CSS3的Flexbox布局。

以下是一个示例（http://codepen.io/anon/pen/gifeu）

.wrapper {
  display: flex;
  flex-flow: row;

  text-align: center;
}

.wrapper > * {
  padding: 10px;
}


.main {
  text-align: left;
  background: deepskyblue;
  flex: 1 100%;
}

.aside {
  background: gold;
  flex: 1 auto;
}

这是关于Flexbox的教程：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

如果您不关心IE9，Flexbox支持是好的：http://caniuse.com/#search=flex

Answer 3

使用CSS2没有（简单）方法可以做到这一点，但CSS3 Flexbox非常简单。