添加文本时阻止div向下移动

Question

我试图在一个方形div中放置一些文本.唯一的问题是它会将文本的div转移很多.有谁知道我怎么能让div回到原来的位置？

这是html:

<div id="squarecontainer">
    <div id="square1">
        <p>Easy to Manage</p>
    </div>
    <div id="square2">

    </div>
    <div id="square3">

    </div>
</div>

这是css:

#squarecontainer{
    text-align: center;
}

#square1{
    display: inline-block;
    position: relative;
    margin-right: 100px;
    height: 310px;
    width: 310px;
    margin-top: 72px;
    background-color: #fff;
}

#square2{
    display: inline-block;
    position: relative;
    height: 310px;
    width: 310px;
    margin-top: 72px;
    background-color: #fff;
}

#square3{
    display: inline-block;
    position: relative;
    margin-left: 100px;
    height: 310px;
    width: 310px;
    margin-top: 72px;
    background-color: #fff;
}

#square1 当我添加"易于管理"文本时,div正在向下移动.

Answer 1

我找到了解决方案.通过添加vertical-align: top;它将div移回.不知道为什么会奏效,但确实如此.

Answer 2

要加上zachstarnes的答案.

问题是vertical-align默认情况下设置为baseline.

将元素的基线与父元素的基线对齐.这是默认值

由于其他div是空的,它们的基线默认为div的底部.请注意,如果您填写文本,他们将全部开始向下移动,直到他们都有内容.

根据您希望div如何相互排列,将vertical-align属性更改为其他属性baseline.