8

我正在尝试在方形 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 会向下移动很多。

4

6 回答 6

17

我找到了解决方案。通过添加vertical-align: top;它，将 div 移回。不知道为什么它有效，但它确实有效。

于 2013-03-05T06:12:29.447 回答
13

将补充zachstarnes 的答案。

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

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

由于其他 div 为空，因此它们的基线默认位于 div 的底部。请注意，当您填写文本时，它们都将开始向下移动，直到它们都包含内容。

根据您希望 div 彼此对齐的方式，将vertical-align属性更改为 other baseline。

垂直对齐：基线

于 2013-03-05T06:56:23.673 回答
3

为您的p标签提供位置。问题将得到解决。

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

工作小提琴

于 2013-03-05T06:16:52.497 回答
2

使用它可以解决问题：

#square1 {
    overflow: auto;
}
于 2018-09-16T14:11:05.687 回答
2

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

在行内级别（行内块）中，您必须指定文本的垂直对齐方式。所以本质上，在不设置垂直对齐位置的情况下，内容被放置在其默认位置，即基线。这就是为什么您的文本偏移了您的布局。

于 2019-01-23T08:50:58.223 回答
1

使用word-wrap属性

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

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

于 2013-03-05T06:09:55.333 回答