css - 相对于同级的流体宽度 div

Question

我怀疑这可能需要 Flexbox(或者会简单得多)，但也许有人有想法/解决方法。我有这样的结构:

<section>
  <div>Some Text Here</div>
  <div></div>
</section>

部分宽度:100%。我希望第一个 div(向左浮动)根据文本拉伸(stretch)到不同的宽度，我希望第二个 div 占据部分剩余的百分比。每个 div 可能包含 float 在内部的各种其他 div(它们依次使用百分比表示宽度)。这可能吗？

编辑:好的，我认为更大的问题是在第二个 div 中，我有一个宽度为 % 的 float div，但它的父级是宽度自动的...所以它不能正常工作，对吧？ Codepen

Answer 1

您可以通过将一个 DIV 指定为左浮动，将另一个指定为自动(因此它使用剩余的空间)来实现这一点

div:first-child { /* div on the left, width as per content */
    float: left;
    width: auto;
    background-color: #777;
}
div:last-child { /* div on the right, uses remaining width */
    background-color: #77f;
    width: auto;
}

查看此演示:http://jsfiddle.net/pQc3d/1/