Question

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

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

boundingRect()

似乎对于前6列，其宽度为'16 .2857％'，对于最后一列，其宽度为'14 .2857％'。实际上，14.2857是要应用的正确值。 border和box-sizing属性会影响它。

但同时，如果将jquery宽度更改为css，则效果很好。

NSTextContainer()

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

下面是我的工作样本

AKLabel

Problem URL:
    ... Trying JMETER_HOME=..
    Found ApacheJMeter_core.jar
    Sep 12, 2018 1:33:34 PM java.util.prefs.WindowsPreferences <init>
    WARNING: Could not open/create prefs root node Software\JavaSoft\Prefs at root 0x80000002. Windows RegCreateKeyEx(...) returned error code 5.
    Server failed to start: java.rmi.server.ExportException: Listen failed on port: 0; nested exception is:
           java.io.FileNotFoundException: rmi_keystore.jks (The system cannot find the file specified)
    An error occurred: Listen failed on port: 0; nested exception is:
           java.io.FileNotFoundException: rmi_keystore.jks (The system cannot find the file specified)
    errorlevel=1
    Press any key to continue . . .

C:\Users\rozeena.ibrahim>d:

D:\>cd apache-jmeter-4.0

D:\apache-jmeter-4.0>cd bin

D:\apache-jmeter-4.0\bin>jmeter-server.bat
Could not find ApacheJmeter_core.jar ...
... Trying JMETER_HOME=..
Found ApacheJMeter_core.jar
Sep 12, 2018 1:34:12 PM java.util.prefs.WindowsPreferences <init>
WARNING: Could not open/create prefs root node Software\JavaSoft\Prefs at root 0x80000002. Windows RegCreateKeyEx(...) returned error code 5.
Server failed to start: java.rmi.server.ExportException: Listen failed on port: 0; nested exception is:
       java.io.FileNotFoundException: rmi_keystore.jks (The system cannot find the file specified)
An error occurred: Listen failed on port: 0; nested exception is:
       java.io.FileNotFoundException: rmi_keystore.jks (The system cannot find the file specified)
errorlevel=1
Press any key to continue . . .

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

Answer 1

这似乎与jQuery文档中的这一行有关

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

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

Answer 2

.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>

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

2 个答案: