如何为不是直接父级而是父级父级的嵌套元素设置百分比宽度？

Posted 2023-03-06

【中文标题】如何为不是直接父级而是父级父级的嵌套元素设置百分比宽度？

【英文标题】：How to set percentage width for a nested element not of direct parent but of parent's parent?

【发布时间】：2017-09-01 23:19:32

【问题描述】：

我在彼此内部有三个 div。我希望最里面的 div 的宽度相对于最外面的 div 的 div 设置为百分比。这构成了必须动态附加的行的一部分。

trhtml += '<td id="'+tnum+'">
              <div style="height: 20px;">//outermost div 100px width
                <div id="d'+divid +'" style="height: 20px;float:left;color: rgb(255, 255, 255);background-color: ' + color + '; font-weight: bold;font-family: Arial Black; width:'+ util +'%;">
                  ' + weekno.TotalUtilization +
                  '<div style="float:right; height: 20px; background-color: rgb(102,197,232);width:'+ sfin +'%;">
                   </div>
                 </div>
             </div>
           </td>';

第二个宽度的宽度由变量 "util" 决定，以百分比表示，相对于其父级。最内层 div 的宽度也由变量 "sfin" 动态决定。我希望最内层 div 的宽度也根据最外层 div 而不是第二个 div 来决定。

示例：如果outermostdiv宽度为100px；和util = 50;然后第二个 div 的宽度是 50px。如果 sfin =50;然后是最里面 div 的宽度 变为 50px 的 50% = 25px；我希望 sfin 等于 100 的 50% = 50 像素。

在 Jquery 和 将 div 并排放置有什么方法可以做到这一点？我是编码新手，因此感谢所有帮助。

【问题讨论】：

将父div的宽度存储在一个变量中，使用计算将宽度除以2并使用.css()方法为子元素添加宽度，等于新计算的值

它并不总是 50%，取决于变量 util 和 sfin。 @EthanBristow

【参考方案1】：

这可以通过 CSS 来完成，您将 position: relative 设置为最外层，div 和 position: absolute 设置为最内层。

这样做，最内层将其位置和大小与最外层相关联

更新

要将最里面的位置靠近中间div，请将其用作其左侧位置：left:'+ util +'%;

<div>"sfin" is 50%</div>

<table>
  <tr>
    <td id="tnum">
      <div style="height: 20px; width: 100px; position: relative;">
        <div id="did" style="height: 20px;float:left;color: rgb(255, 255, 255);background-color: red; font-weight: bold;font-family: Arial Black; width:50%;overflow: hidden;">
          weekno.TotalUtilization
          <div style="position: absolute; top:0; left: 50%; height: 20px; background-color: rgb(102,197,232);width:50%;"></div>
        </div>
      </div>
    </td>
  </tr>
</table>

<div>"sfin" is 25%</div>

<table>
  <tr>
    <td id="tnum">
      <div style="height: 20px; width: 100px; position: relative;">
        <div id="did" style="height: 20px;float:left;color: rgb(255, 255, 255);background-color: red; font-weight: bold;font-family: Arial Black; width:50%;overflow: hidden;">
          weekno.TotalUtilization
          <div style="position: absolute; top:0; left: 50%; height: 20px; background-color: rgb(102,197,232);width:25%;"></div>
        </div>
      </div>
    </td>
  </tr>
</table>

【讨论】：

谢谢！有什么办法可以消除中间的空白吗？ @LGSon

@AyushiZile 用建议更新了我的答案

这正是我想要的！非常感谢:) @LGSon