使用CSS動態控制兩個內部div的大小

Question

我有一個div容器，有一些固定大小的「前」和「後」內容，主要內容夾在中間 - 主要內容基本上由一個標籤和一個數字。這裏有一個帶樣本的jsfiddle link（代碼也在下面複製 - 我添加了僅用於可見對比度的顏色）。

線框樣機：

------------------------------------------ 
| A | Variable Sized Content | 123 | B | 
------------------------------------------ 

A和B是前置和後置的內容;文本和數字的意思是可變大小，與想法，如果沒有足夠的房間，內容將縮小，並以省略號被截斷：

--------------------------------- 
| A | Variable Siz... | 123 | B | 
--------------------------------- 

如果有一個很大的空間，多餘的空間去數量和B之間：

----------------------------------------------------- 
| A | Variable Sized Content | 123    | B | 
----------------------------------------------------- 

我知道了，現在工作的方法是通過在Javascript上outerDiv一個調整大小監聽器設置member-text類的max-width。這也管理內容div的最小尺寸，以便進一步縮小也將橢圓化數字。

我遇到的問題是在試圖使這項工作不的Javascript - 有max-width不斷變化的所有元素是相當cludgy /慢（樣品只顯示了兩個項目，但在生產中，這是一個許多項的列表），並且使得該結構不太適合用作其他小部件的子組件。我可以重構它來工作，但這需要一些時間，而且似乎「更正確」的解決方案是在可能的情況下使用CSS。

我到模擬該最接近的是爲member-text 100％，max-width爲member-token設置max-width至85％左右，這看起來不錯，周邊的默認（230-290ish）的outerDiv寬度範圍，但除此之外，它分解（在錯誤的部分中太多/很小的間距）。

編輯：與display: table（和table-row/table-cell，與table-layout: fixed根格我也嘗試過，現在的div - 通過指定所有，但一列的寬度，即列可以是動態調整這將是如果只有一個具有可變大小內容（文本）的div，這很有用，但在這種情況下，有兩個（泡泡文本，由模型中的數字表示），但此策略似乎不允許多個動態大小的列

這導致了我的問題 - 它甚至可以用CSS來做這種事情嗎？如果是這樣，怎麼樣？即使是冥王星數字是一個固定寬度來簡化問題，這似乎不可能沒有Javascript ...

下面的代碼示例（簡化的例子來演示這個問題）

HTML：

<div class="outerDiv"> 
    <div class="post-mark"></div> 
    <div class="pre-mark"></div> 
    <div class="member"> 
     <div class="member-token"> 
      <label class="member-text">Very Long Text Purple Monkey Dishwasher</label> 
     </div> 
     <div class="member-bubble"> 
      <span class="member-bubble-text">500</span> 
     </div> 
    </div> 
</div> 

<div class="outerDiv"> 
    <div class="post-mark"></div> 
    <div class="pre-mark"></div> 
    <div class="member"> 
     <div class="member-token"> 
      <label class="member-text">Purple Monkey Dishwasher</label> 
     </div> 
     <div class="member-bubble"> 
      <span class="member-bubble-text">500</span> 
     </div> 
    </div> 
</div> 

CSS：

.outerDiv { 
     width: 280px; 
     height: 100px; 
     background-color: lightgrey; 
    } 

    .post-mark { 
     display: inline-block; 
     height: 100%; 
     margin-right: 8px; 
     position: relative; 
     width: 18px; 
     float: right; 
     background-color: cyan; 
    } 

    .pre-mark { 
     height: 100%; 
     margin-left: 4px; 
     position: relative; 
     width: 18px; 
     float: left; 
     background-color: pink; 
    } 

    .member { 
     margin-left: 22px; 
     height: 22px; 
     overflow: hidden; 
     position: relative; 
     white-space: nowrap; 
     background-color: cadetblue; 
    } 

    .member-token { 
     float: left; 
     height: 20px; 
     margin-left: 2px; 
     padding: 0 3px; 
     background-color: darksalmon 
    } 

    .member-text { 
     display: inline-block; 
     line-height: 20px; 
     max-width: 193px; 
     overflow: hidden; 
     text-overflow: ellipsis; 
     white-space: nowrap; 
     background-color: goldenrod; 
    } 

    .member-bubble { 
     display: block; 
     height: 100%; 
     overflow: hidden; 
     padding: 0 4px; 
     position: relative; 
     background-color: burlywood 
    } 

    .member-bubble-text { 
     top: 4px; 
     -moz-box-sizing: border-box; 
     background-color: #F2F2F2; 
     border-radius: 3px 3px 3px 3px; 
     display: inline-block; 
     line-height: 14px; 
     max-width: 100%; 
     padding 0 4px; 
     position: relative; 
     vertical-align: top; 
     color: #666666; 
     font-size: 11px; 
     font-weight: bold; 
     overflow: hidden; 
     text-overflow: ellipsis; 
     white-space: nowrap; 
    } 

Answer 1

我知道表一般應避免使用但是，在這種情況下，我認爲這可能是你最好的選擇。

我能夠通過使用表格以簡單的HTML/CSS獲得您想要的行爲。
這裏的關鍵技巧是擁有可變大小的內容單元位置：相對位置，並在其內部有一個絕對定位的跨度，固定在所有四個角落，以便伸展。

HTML：

<table> 
<tr> 
    <td class="pre"> 
     A 
    </td> 
    <td class="shrinking"> 
     <span> 
      Very Long Text Purple Monkey Dishwasher 
     </span> 
    </td> 
    <td class="expanding"> 
     <span>500</span> 
     <span class="post"> B</span> 
    </td> 
</tr> 

CSS：

table { 
    background: lightgrey; 
    width:300px; 
} 
td { 
    border: 1px red solid; 
    white-space:nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 
td.pre { 
    width: 25px; 
    min-width: 25px; 
    text-align: center; 
} 
td.shrinking { 
    max-width: 280px; 
    width: 280px; 
    position: relative; 
} 
td.shrinking span { 
    white-space:nowrap; 
    display: inline-block; 
    overflow: hidden; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    text-overflow: ellipsis; 
} 
td.expanding { 
    min-width: 80px; 
} 
.post { 
    float:right; 
    border: 1px red solid; 
    width: 25px; 
    text-align: center; 
} 

你可以看到它在這裏的行動，http://jsfiddle.net/ijoukov/xMf8L/