增加行内块元素的高度

Increasing the height on inline block elements together?

本文关键字：高度 元素 增加      更新时间：2023-09-26

我必须开发一个具有不同宽度的三个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;
}

问题是，虽然这工作得很好，在主窗格中，我有动态内容的来源，当它增加时，我希望其他div也增加那里的大小，但它们都没有随着内容的增加而增加。有谁能帮我一下吗?

(我也尝试使用display:table-cell，但我不能指定单独的宽度，因为我希望每个div是指定的宽度)

Thanks and Regards

删除white-space: nowrap;，添加word-wrap: break-word; 

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

查看这个Demo

相关文章：