添加文本时阻止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's answer。

问题在于vertical-align by default is set to baseline。

  

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

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

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

---

Answer 3

为您的p标记添加排名。问题将得到解决。

#square1 p {
      position:absolute;
      width: 100%;
      text-align: center;
}

<强> Working Fiddle

Answer 4

使用word-wrap属性

div[id^="square"]{
  word-wrap: break-word;
}

您可以使用normal属性指定break-word或word-wrap值。 Normal表示文本将扩展框的边界。 Break-word表示文本将换行到下一行。

Answer 5

使用此方法可以解决问题：

#square1 {
    overflow: auto;
}

Answer 6

发生这种情况的原因，它发生在inline-block个元素上：

在内联级别（内联块）中，您必须指定文本的垂直对齐方式。因此，从本质上讲，无需设置垂直对齐的位置，就可以将内容放置在其默认位置（基线）中。这就是为什么文本偏移布局的原因。