0

次のように、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のソリューションをいただければ幸いです。

4

1 に答える 1

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 には非常に非現実的なテキストが含まれているため、ブラウザは可能な限り補正しています。

于 2012-11-21T14:18:17.830 に答える