我有一个简单的 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 解决方案。
最佳答案
这取决于你想支持旧浏览器的程度。你可以做一些检测,如果它们支持 flexbox
然后使用它,否则回退到 jquery
。 Javascript 将始终适用于它,但它会添加另一层处理。如果你想尝试新的 flexbox
规范,你可以看看这个 http://www.adobe.com/devnet/html5/articles/working-with-flexbox-the-new-spec.html
关于jquery - 2 列,1 列宽度固定,另一列变化以适应行的其余部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15962200/