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

您可以看到，如果您输入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');
});

使用容器大小在两个其他元素之间生成元素

1 个答案: