使用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/