Question

我有三个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”的百分比，wrt为其父级。最内层div的宽度也由变量“sfin”动态决定。我希望最内层div的宽度也是根据最外层div而不是第二个div来决定的。

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

在Jquery中执行此操作的方法是什么，也可以将div并排放置？我是编码的新手，所以感谢所有的帮助。

Answer 1

可以使用CSS完成，您可以将position: relative设置为最外层div，将position: absolute设置为最里面。

这样做最内层将其位置和大小与最外层的

联系起来

更新

要将中间位于中间div旁边，请将其用于左侧位置：left:'+ util +'%;

＆＃13;

<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>

＆＃13;

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

1 个答案: