使用容器大小在其他两个元素之间增长一个元素答案

【问题标题】：Growing an element between two other elements with the container size使用容器大小在其他两个元素之间增长一个元素
【发布时间】：2017-09-27 14:56:34
【问题描述】：

我正在尝试创建一个布局，随着它的增长，这样做：

AB AABB AAABBB AAA==BBB AAA====BBB

事实证明这很棘手。

到目前为止，我已经尝试了两种方法，内联块和，呃，表格。我可以让A 和B 的增长是正确的，但是当总宽度达到设定点时，我无法让= 增长。

这就是我所拥有的，也在http://jsfiddle.net/cd7sW/。

<div id="page">

    <table id="container1">
        <tr><td colspan="3"><pre contenteditable="true">yada yada...</pre></td></tr>
        <tr><td id="a">&nbsp;</td><td id="middle1">&nbsp;</td><td id="b">&nbsp;</td></tr>
    </table>

    <div id="container2">
        <pre contenteditable="true">yada yada...</pre>   
        <span id="c">&nbsp;</span><span id="middle2">&nbsp;</span><span id="d">&nbsp;</span>
    </div>

</div>


#page {
    text-align: center;
    width:100%;
}
#container1 {
    margin: 0 auto;
    border-spacing:0;
}
#a, #b {
    max-width:100px;
}
#a {
    background-color:red;
}
#b {
    background-color:blue;
}
#middle1 {
    width: 0;
}

#container2 {
    display:inline-block;
    margin: 0 auto;
}
#c, #d {
    display:inline-block;
    width:50%;
    height:1em;
    max-width:100px;
}
#c {
    background-color:red;
}
#d {
    background-color:blue;
}
#middle2 {
    display:inline-block;
    width:0;
    min-width: 0;
}

你可以看到你是否在我的第二个例子中输入了 A 和 B 增长和停止增长正确。第一个，我不能让细胞彼此独立生长。

怎么做？

【问题讨论】：

我很确定这不能用纯 css 完成，但用 javascript 完全有可能！我会建立一个例子，敬请期待；）

标签： html css html-table css-float

【解决方案1】：

我希望这或多或少是您的想法。这是一个 jQuery 实现。

工作示例：http://jsfiddle.net/uK4Vt/1/

HTML

<button>Grow!</button>
<div class="wrap">
    <div class="a"></div>
    <div class="middle">Peekaboo!</div>
    <div class="b"></div>
</div>

CSS

.wrap {
    border: 1px green solid;
    width: 60px;
    height: 30px;
    margin: 0 auto;
}

.a {
    background-color: red;
    min-width: 30px;
    max-width: 90px;
    width: 50%;
    height: 30px;
    float: left;
}

.b {
    background-color: blue;
    min-width: 30px;
    max-width: 90px;
    width: 50%;
    height: 30px;
    float: right;
}

.middle {
    background-color: orange;
    overflow: hidden;
    width: 0;
    height: 30px;
    float: left;
    text-align: center;
}

Javascript

$('button').click(function() {
    $(".wrap").css("width", "+=10px");
    $(".middle").css("width", $(".wrap").width() - 180 + 'px');
});

【讨论】：