javascript - 一起增加内联 block 元素的高度？

Question

我必须开发一个包含三个不同宽度的 div 元素的网页。我正在使用下面的代码片段来这样做。

---

page1.html

---

<div id="wrapper">
<div id="left_pane>Left Pane</div>
<div id="main_pane">Main Pane</div>
<div id="right_pane>Right Pane</div>
</div>

---

page1.css

---

#wrapper{
    font-size: 20px;
    letter-spacing: 0px;
    white-space: nowrap;
    line-height: 12px;
    /*overflow: hidden;*/
    width: 100%;

}

#left_pane{
    width: 10%;
    height: 100%;
    border: solid 1px #ccc;
    display: inline-block;
    vertical-align: top;
    margin-right: -6px;

}

#main_pane{

        width: 70%;
        height: 100%;
        border: solid 1px #ccc;
        display: inline-block;
        vertical-align: top;
        margin-right: -6px;
}

#right_pane{

        width: 20%;
        height: 100%;
        border: solid 1px #ccc;
        display: inline-block;
        vertical-align: top;
        margin-right: -6px;
}

问题是虽然这工作正常，但在主 Pane 中我有动态内容的来源，当它增加时我希望其他 div 也增加那里的大小，但是它们都没有随着内容的增加而增加。谁能帮我做同样的事情？

(我也尝试过使用 display:table-cell 但为此我无法指定单独的宽度，因为我希望每个 div 都具有指定的宽度)

感谢和问候

Answer 1

只需删除 white-space: nowrap; 并添加 word-wrap: break-word;

#wrapper{
    font-size: 20px;
    letter-spacing: 0px;
    line-height: 18px;
    width: 100%;
    word-wrap: break-word;
}

检查这个Demo