변경 폭이 동적으로 컨텐츠

에 따라 다음과 같이 전 사업부 내에서 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>

이상적으로

enter image description here

내가 그 div1이 전체 폭과 DIV2의 30 %의 말씀을 전합니다 30 %이고 div3는 40 %입니다. 예를 들어 div3 (오른쪽 div)이 40 %를 차지하지 않으면 인수가 35 % 만 소요되고 나머지 5 %는 div1 및 div2로 똑같이 나누어집니다. div3가 40 % 이상을 차지하면 오버플로되는 콘텐츠에 대해 elips가 표시됩니다. jquery의 모든 솔루션을 주시면 감사하겠습니다. 다음과 같이

출처

2012-11-21 chugh97

이것은 모순되는 요구 사항 집합입니다. 만약 차이가'div2'와'div3' 사이에 나뉘어 진다면,'div3'은 당신이 원하지 않는 너비 42.5 %를 가질 것입니다 (당신은 줄임표를 사용하고 40 % 너비 이상의 내용을 자르고 싶습니다). –

마지막 div의 너비가 40 %를 넘으면 내용에 대해 elips가 표시되고 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

변경 폭이 동적으로 컨텐츠

답변

관련 문제