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

Question

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

    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;
}

您可以查看您是否在我的第二个示例（它是 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');
});

​</p>

​</p>