通过jQuery应用时出现“宽度”问题

Question

我有一个容器DIV，它有7个（这是可变数字）DIV，对齐为7列。由于列数不断变化，我想采用列计数并使用jquery计算（100 /列计数）并将此宽度应用于每列。对于每个列分隔，我已经为列添加了2px边框，除了最后一列。我还应用了边框大小调整，以避免百分比宽度和像素宽度边框之间的冲突。

我的问题是当通过jquery宽度应用列宽时，

var count = $('.col').length;
$('.col').width(100/count+'%');

似乎前6列的宽度为'16 .2857％'，最后一列的宽度为'14 .2857％'。实际上，14.2857是适用的值。边框和大小调整属性会影响它。

但同时，如果你将jquery宽度更改为css，它的工作原理非常好。

var count = $('.col').length;
$('.col').css('width',100/count+'%');

任何人都知道为什么会这样吗？

下面是我的工作样本

$(window).ready(function(){

  //This make the width Issue
  var count = $('.col').length;
  $('.col').width(100/count+'%');
  
  //But This works perfectly fine
  //var count = $('.col').length;
  //$('.col').css('width',100/count+'%');
});

.container{
  width: 210px;
  height:120px;
  float: left;
  border: solid 2px red;
}
.col{
  height: 100%;
  float:left;
  background:green;
  border-right: solid 2px yellow;
  box-sizing: border-box;
}
.col:last-child{
  border-right: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Answer 1

.width()

请注意，无论CSS box-sizing属性的值如何，.width（）将始终返回内容宽度。从jQuery 1.8开始，这可能需要检索CSS宽度加上box-sizing属性，然后在元素具有box-sizing：border-box时减去每个元素上的任何潜在边框和填充。要避免这种损失，请使用.css（“width”）而不是.width（）。

虽然首选方法是使用.css()，但仍然可以通过使用outerWidth()而不是width()来获得预期结果：

$(window).ready(function(){

  //This make the width Issue
  var count = $('.col').length;
  $('.col').outerWidth(100/count+'%');
  //But This works perfectly fine
  //var count = $('.col').length;
  //$('.col').css('width',100/count+'%');
});

.container{
  width: 210px;
  height:120px;
  float: left;
  border: solid 2px red;
}
.col{
  height: 100%;
  float:left;
  background:green;
  border-right: solid 2px yellow;
  box-sizing: border-box;
}
.col:last-child{
  border-right: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Answer 2

看起来这与jQuery文档中的这一行有关

请注意，无论CSS box-sizing属性的值如何，.width（）将始终返回内容宽度。从jQuery 1.8开始，这可能需要检索CSS宽度加上box-sizing属性，然后在元素具有box-sizing：border-box时减去每个元素上的任何潜在边框和填充。要避免这种惩罚，请使用.css（“width”）而不是.width（）

https://api.jquery.com/width/