添加文本时更改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>

在这里看一个例子.