jquery - 2 列，1 列宽度固定，另一列变化以适应行的其余部分

Question

我有一个简单的 2 block 列:

<div id="wrap">
    <div class="column_1"></div>
    <div class="column_2"></div>
</div>

我希望 column_2 的宽度固定，比如 60px。两列都向左浮动。列的组合总(可变)宽度等于换行总宽度:

#wrap { width: 100%; }
.column_1, .column_2 { float: left; }
.column_2 { width: 60px; }

注意:换行会改变宽度，因为它嵌套在不同大小的 block 中。

一个很好的使用示例是在 column_1 中输入文本，在 column_2 中有一个按钮。自然地，按钮保持相同大小，而 column_1 内的输入将相应地拉伸(stretch)。

人们会怎么做呢？

注意:我更喜欢 CSS 解决方案，但如果那真的不可能，我愿意使用 jquery 解决方案。

Answer 1

这取决于你想支持旧浏览器的程度。你可以做一些检测，如果它们支持 flexbox 然后使用它，否则回退到 jquery。 Javascript 将始终适用于它，但它会添加另一层处理。如果你想尝试新的 flexbox 规范，你可以看看这个 http://www.adobe.com/devnet/html5/articles/working-with-flexbox-the-new-spec.html