jquery - 根据内容动态更改 div 的宽度

Question

我在一个 div 中有 3 个 div，如下所示：

    <div id="header">
          <div id="div1">
               <a class="menuSelector">
                    <span class="menuSeletedText">Contacts very long caption xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxyx</span>
                    <div class="menuSelectorButton"></div>
               </a>
          </div>
          <div id="div2"> at CUSTOMER NAME</div>   
          <div id="div3">
               <div>
                    <div id="filterdropdown" class="filterdropdown">
                         <a class="menuSelector">
                              <span class="menuSeletedText">Very long filter Name 12346666666667889999999999999999999999999999999999999910</span>
                              <div class="menuSelectorButton"></div>
                         </a>
                    </div>
               </div>
          </div>
     </div>

理想情况下，我想说 div1 占总宽度的 30%，div2 占 30%，div3 占 40%。例如，如果div3（右边的div）不占40%，为了论证只占35%，那么剩下的5%平均分为div1和div2。如果 div3 占用超过 40%，则溢出内容会出现省略号。jquery 中的任何解决方案将不胜感激。

Answer 1

我会按如下方式使用 CSS：

#div1,#div2,#div3 {
    display: table-cell;
    border: 1px solid blue;
}
#div1,#div2 {
    min-width: 30%;
}
#div3 {
    max-width: 40%;
    text-overflow: ellipsis;
}

这不会给你你想要的东西，但它可能会足够接近。您在这些 div 中有一些非常不切实际的文本，因此浏览器正在尽其所能进行补偿。