javascript - 停止 div table-cell 在中心调整大小？

Question

我在 DIV 上创建了一个可调整大小的内联表。

基本上，它允许某人使用 jQuery 调整表格单元格的大小。

如果扩展内联表然后调整表格单元格的大小，如何防止 .spacer 表格单元格在中心扩展和收缩？我希望表格单元格的左边位置保持在左边，只允许右边的尺寸扩大或缩小？

我希望这是有道理的! jsfiddle 示例在这里(请先展开外部 div，然后调整内部间隔 div 的大小):http://jsfiddle.net/GT5Pc/

CSS:

    .draggableElementContainer {
    width:300px;
    border:#000 dashed 1px;
    display:inline-table;
    white-space:nowrap;
}
label {
        width: fit-content;
        max-width: fit-content;
        min-width: fit-content;
}
    .spacer {
        border: #000 dashed 1px;
        display: table-cell;
        white-space: nowrap;
       text-align: left;
       width: 100%;
    }

HTML:

<div class="draggableElementContainer">
    <label>Test</label>
    <div class="spacer">
       </div>
    <input type="input" id="test" />

</div>

jQuery:

$("div").resizable();

Answer 1

将固定的 table-layout 添加到您的 .draggableElementContainer 选择器:

.draggableElementContainer {
    ...
    table-layout: fixed;
}

JSFiddle demo .