动态计算div宽度

Question

以下是示例部门：

#grandparent {
  width: 100px;
}
#parent {
  overflow: auto;
  height: 100px;
}
.child {
  overflow: hidden;
  margin-left: 10px;
}

<div id="grandparent">

  <div id="parent">

    <div class="child">1000000000000000000000000</div>
    <div class="child">1000000000000000000000000</div>
    <div class="child">1000000000000000000000000</div>
    <div class="child">1000000000000000000000000</div>
    <div class="child">1000000000000000000000000</div>
    <div class="child">1000000000000000000000000</div>
    <div class="child">1000000000000000000000000</div>

  </div>

</div>

<div class="child">宽度值始终比<div id="parent">宽度值小10个像素。如何计算，以便给<div id="parent">赋予任何宽度值，它的孩子比那个小10个像素？

非常感谢任何帮助！

麦克

Answer 1

使用jQuery，这非常简单。只需从what.innerWidth()这里减去10：

$(".child").css('width', $('#parent').innerWidth()-10);

你也可以这样做：

$(".child").each(function(){
    $(this).css('width', $(this).parent().innerWidth()-10);
});

- 这意味着您可以拥有多个父级，而无需了解id。

普通JS

您可以使用HTML元素对象的clientWidth属性。像这样：

var targetParent = document.getElementById('parent'); // or whatever
var targets = targetParent.getElementsByClassName('child');
for(var i=0;i<targets.length;i++) targets[i].parentNode.style.width = targets[i].clientWidth - 10;

希望这有帮助！ - 坦纳。

Answer 2

尝试使用此css作为父级：

#parent {
 overflow:auto; height:100px;
 padding: 0 5px 0 5px;
}

Answer 3

这就是CSS中选择器的用途：

#parent.div {
    width: 100%;
    margin-left: 10px;
    margin-right: 10px;
}

Answer 4

这可以通过calc

完成

      width: -webkit-calc(50% - 7px) !important;
      width: -moz-calc(50% - 7px) !important;
      width: calc(50% - 7px) !important;

更多信息和示例https://developer.mozilla.org/en-US/docs/Web/CSS/calc