Question

我遇到了问题，因为div的宽度不是我预期document.ready的宽度。

div.left的内容在加载后动态呈现，但在此之前我需要知道div.right的宽度（它包含一个D3图，我需要知道宽度才能设置SVG的宽度）。

<div class="left">
  <span class="left-inner">&nbsp;</span>
</div>
<div class="right">
</div>

这是我的CSS（设置为左侧div为固定宽度，右侧div扩展以填充可用空间）：

.left {
  float: left; 
  width: 200px; 
  min-width: 200px;
  background-color: red;
}
.right { 
  overflow: hidden;
}

但是，如果我在document.ready：

上运行此功能

console.log('width', $(".left-inner").width());

它表示宽度是4px，而不是200px，正如我所期望的那样（并且我需要）。

我需要计算右侧div的宽度以进行单独的D3计算：

console.log('width', $(".right-inner").width());

目前这比它应该宽196px。

为什么会这样？如何为正确的div获得正确的宽度？（我想作为一个黑客，我可以查找左侧div的CSS max-width属性，并从右侧div的渲染宽度中减去它，但我宁愿找到更好的解决方案。）

Answer 1

.left-inner是一个span元素，没有宽度，它是一个“内联”元素。

添加到您的css代码中，使其成为块元素，或将“span”替换为“div”

.left-inner {
    display:block;
}