时间戳

首页 > 解决方案 > 按宽度拆分 div 以填充父 div

html - 按宽度拆分 div 以填充父 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。

标签： htmlcss

解决方案

你在里面放了一些额外"的东西——之后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%。

推荐阅读