添加文本时更改Div位置

Question

我正在尝试使用div制作三个部分。

以下是我目前所拥有的图片：

当我向中间div添加文本时，div会向下移动：

HTML：

<div id="wrapper">
    <div id="left"></div>
    <div id="middle">sometext</div>
    <div id="right"></div>
</div>

CSS：

#left{
    width: 610px;
    height: 1065px;
    background-color: #ececec;
    border: 1px solid #636363;
    margin: 7px 0px 0px 15px;
    display: inline-block;
}

#middle{
    width: 625px;
    height: 1065px;
    background-color: #ececec;
    border: 1px solid #636363;
    margin: 7px 0px 0px 15px;
    display: inline-block;
}

#right{
    width: 610px;
    height: 1065px;
    background-color: #ececec;
    border: 1px solid #636363;
    margin: 7px 0px 0px 15px;
    display: inline-block;
}

Answer 1

将overflow: hidden;设置为您的div。

示例：

#middle {
    overflow: hidden;
    width: 625px;
    height: 1065px;
    background-color: #ececec;
    border: 1px solid #636363;
    margin: 7px 0px 0px 15px;
    display: inline-block;
}

如果您希望容器在文本到达底部时可以滚动，您也可以将其设置为overflow: auto。

另一种更常见的方法是使用CSS的float。

然后你可以像这样设计你的div：

div {
    float: left;
    width: 625px;
    height: 1065px;
    background-color: #ececec;
    border: 1px solid #636363;
    margin: 7px 0px 0px 15px;
}

和HTML：

<div>Content</div>
<div>Content</div>
<div>Content</div>

查看示例fiddle here。