按宽度拆分 div 以填充父 div答案

【问题标题】：Split divs by width to fill parent div按宽度拆分 div 以填充父 div
【发布时间】：2019-09-20 16:09:56
【问题描述】：

我有一个父 div，其中有子 div，这些子 div 是在其下动态添加的。我想根据孩子的宽度完全填充父 div。子元素的组合宽度始终等于 100。

到目前为止我已经尝试过了：

<div style="position:relative; background-color:red;">
  <div class="progressPercent" style="display:inline-block;""width:33%">33
  </div>
  <div class="progressPercent" style="display:inline-block;" "width:33%">33% 
  </div>
  <div class="progressPercent" style="display:inline-block;" "width:33%">33% 
  </div>
</div>

JSFiddle

所有子 div 都是动态创建的，我正在尝试创建一个完成进度百分比条。

正如小提琴中解释的那样，我想完全填充 GREEN div 以覆盖 RED 父 div。

【问题讨论】：

修复你的html。
样式属性坏了。不要将每个“样式”包含在单独的一组引号中。你只需要一个。 style="display:inline-block; width:33%"。另请注意，除非你真的必须，否则尽量不要使用“！important” - 它会在未来为你省去很多麻烦。
在这里工作check
是的，HTML 确实被破坏了，因为它是动态生成的，我在那里添加了一个额外的 "。谢谢@emix 和 Lewis。
添加 'float:left' 如 @ Joykal Infotech 所解释的那样工作。这解决了问题

标签： html css

【解决方案1】：

您在其中添加了一些额外的" - 在inline-block 之后。还要考虑到行尾会增加一个额外的空间，因此您的容器的总宽度将是 33% + 33% + 33% + 2 个额外的空间。

您可能想尝试使用display: flex;

<style>
.progressPercent {
    color: #000!important;
    background-color: green!important;
    border-radius: 0.5px;
    text-align: right;
    height:100%;
    font-weight: bolder;
}
</style>
<div style="display: flex;">
    <div class="progressPercent" style="flex-basis: calc( 100% / 3 );">33%</div>
    <div class="progressPercent" style="flex-basis: calc( 100% / 3 );">33%</div>
    <div class="progressPercent" style="flex-basis: calc( 100% / 3 );">33%</div>  
</div>

我使用calc( 100% / 3 )，因为它比使用 33% 的树时间更准确，比 100% 少 1%。

【讨论】：

我有一个要求，我需要四舍五入并显示进度。悬停时应显示详细的小数位数。为简单起见，我在示例中添加了舍入值。我使用实际计算为 33.33 来实时设置宽度。感谢您在这里提出关注点。如问题中所述，我有 div 动态，可以是 75-25（2 div）或 25-25-10-10-30（5 div）之类的任何东西。

【解决方案2】：

flex-wrap: nowrap 可用于确保所有元素都在同一行。在 Style 标签之间弹出这个，你应该没问题。

div{
    display: flex;
    flex-wrap: nowrap;
}

【讨论】：