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

问题在于，虽然这很好，但在主窗格中我有动态内容的来源，当它增加时，我希望其他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

将内联块元素的高度一起增加？

1 个答案: