html - 添加文本时，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>

在此处查看示例小提琴。