html - コンテナサイズで他の2つの要素の間に要素を成長させる

Question

私はそれが成長するにつれて、これを行うレイアウトを作成しようとしています：

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

そして、それはトリッキーであることが証明されています。

これまでに、インラインブロックとテーブルの2つのアプローチを試しました。成長して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;
}

私の2番目の例（コンテンツ編集可能）に入力して、成長し、正しく成長を停止するかどうかを確認でき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');
});

</ p>

</ p>