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

Question

我有一个简单的 2 块列：

<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; }

注意：换行会改变宽度，因为它嵌套在不同大小的块内。

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

怎么办？

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

Answer 1

这取决于您希望支持旧浏览器落后多远。您可以进行一些检测，如果他们支持flexbox则使用它，否则使用jquery. Javascript 将始终为它工作，但它会添加另一层处理。如果您想尝试使用新flexbox规范，可以查看此http://www.adobe.com/devnet/html5/articles/working-with-flexbox-the-new-spec.html