html - 在具有容器大小的两个其他元素之间生长一个元素

Question

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

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

And it's proving tricky.

I've tried two approaches so far, inline-block and, ugh, tables. I can get the growing of A and B to be correct, but I can't get = to grow when the total width reaches a set point.

This is what I've got, also at 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;
}

你可以看到如果你输入我的第二个例子(它是 contenteditable)A 和 B 正确增长和停止增长。第一个，我无法让细胞彼此独立生长。

如何实现？

Answer 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');
});