根据内容动态更改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中有一些非常不现实的文本，所以浏览器尽可能地补偿。