改變DIV的寬度動態地基於內容

我有一個div內3周的div如下：改變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>

enter image description here

理想我想說DIV1是總寬度和DIV2的30％是30％，div3是40％。如果對於例如div3（右邊的div）沒有佔用40％，爲了參數而只佔35％，那麼剩下的5％被平分爲div1和div2。如果div3超過40％，則會出現溢出內容的縮略圖。任何jQuery解決方案將不勝感激。

來源

2012-11-21 chugh97

這是一組矛盾的要求。如果div2和div3之差被分開，div3將會有42.5％的寬度，這是你不想要的（你想使用省略號和截斷寬度超過40％的內容）。 –

如果寬度超過最後div的40％，那麼會出現一個elipses用於內容，div保持在40％。只有當它佔據不到40％，比如說35％，那麼div 3是35％，5％在div1和div2之間平分。 – chugh97

如果第一個div的寬度是35％，那麼你說你想讓剩下的5％在另外兩個之間分配。這使得最後一個div'40 + 2.5 = 42.5％'寬，這是你不想要的。你看到矛盾了嗎？ –

如下，我會用CSS：

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

這會不會給你你想要什麼，但它可能會非常接近。你在這些div中有一些非常不切實際的文本，所以瀏覽器正在儘可能地進行補償。

來源

2012-11-21 14:18:17 Blazemonger

改變DIV的寬度動態地基於內容

回答

相關問題