Question

我有一个父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。

Answer 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％）更准确。

Answer 2

flex-wrap：nowrap可用于确保所有元素都在同一行中。将其弹出到“样式”标签之间，就可以了。

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

按宽度划分div以填充父div

2 个答案: