Problème avec "width" lors de l'application via jQuery

Question

J'ai un conteneur DIV qui contient 7 (c'est un nombre variable) DIV alignés en 7 colonnes. Comme le nombre de colonnes varie, je voudrais prendre le nombre de colonnes et, en utilisant un calcul jQuery (100/nombre de colonnes) appliquer cette largeur à chaque colonne. Pour chaque séparation de colonne, j'ai appliqué une bordure droite de 2px pour les colonnes sauf pour la dernière colonne. J'ai également appliqué une dimension de boîte de bordure pour éviter les conflits entre la largeur en pourcentage et la bordure de largeur en pixels.

Mon problème est lorsque j'applique la largeur de la colonne via jQuery width,

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

il semble que pour les 6 premières colonnes, une largeur de '16.2857%' est appliquée et pour la dernière colonne c'est '14.2857%'. En réalité, 14.2857 est la bonne valeur à appliquer. La bordure et les propriétés de dimension de boîte affectent cela.

Mais en même temps, si vous changez la largeur jQuery en CSS, cela fonctionne parfaitement bien.

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

Est-ce que quelqu'un sait pourquoi cela se produit?

Voici mon exemple de travail

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

Answer 1

Il semble que cela ait quelque chose à voir avec cette ligne de la documentation de jQuery

Notez que .width() renverra toujours la largeur du contenu, quel que soit la valeur de la propriété CSS box-sizing. À partir de jQuery 1.8, cela peut nécessiter de récupérer la largeur CSS plus la propriété box-sizing puis soustraire les éventuelles bordures et marges sur chaque élément lorsque l'élément a box-sizing: border-box. Pour éviter cette pénalité, utilisez .css( "width" ) plutôt que .width()

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

Answer 2

.width()

Notez que .width() renverra toujours la largeur du contenu, quel que soit la valeur de la propriété box-sizing CSS. À partir de jQuery 1.8, cela peut nécessiter la récupération de la largeur CSS plus la propriété box-sizing et ensuite soustraire toute bordure potentielle et rembourrage sur chaque élément lorsque l'élément a box-sizing: border-box. Pour éviter cette pénalité, utilisez .css( "width" ) plutôt que .width().

Bien que la façon préférée soit avec .css(), vous pouvez toujours obtenir le résultat attendu en utilisant outerWidth() au lieu de width():

$(window).ready(function(){

  //Cela cause le problème de largeur
  var count = $('.col').length;
  $('.col').outerWidth(100/count+'%');
  //Mais cela fonctionne parfaitement
  //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;
}