Css框大小和jquery宽度不能正常工作

Question

我一直在讨论这个问题几个小时并且无法解决为什么它不能正常工作..我正在使用固定和流体柱，宽度框大小和边框以及Jquery上设置的宽度的混合。我希望左列为170px，中间和右侧为50％减去左列。但由于某种原因，边界重叠，中间和右边的宽度不同？任何人都可以帮助我吗？

http://jsfiddle.net/Alga/9LGA9/7/

  $('#middle').width(function () {
         return ($(this).parent().width() * 0.5) - 85;
     });

     $('#right').width(function () {
         return ($(this).parent().width() * 0.5) - 85;
     });

Answer 1

使用.outerWidth()代替.width()。我还用$('#left').outerWidth() / 2替换了85以使其更具动态性。

http://jsfiddle.net/9LGA9/11/

 function elasticCol() {
 $('#middle').outerWidth(function () {
     return ($(this).parent().width() * 0.5) - $('#left').outerWidth() / 2;
 });

 $('#right').outerWidth(function () {
     return ($(this).parent().width() * 0.5) - $('#left').outerWidth() / 2;
 });

 }
 elasticCol();

 $(window).on('resize', function () {
     elasticCol();
 });