Question

我为你创建了JSFiddle。删除错误消息时，Contentdiv的大小正确，但如果添加错误消息，contentdiv的bottomborder会扩大自己，我不知道为什么。你能救我吗？

<div class='errormessagecontainer'>
 <div class='errormessage'>
  <span>Error</span>
 </div>
</div>

只需将一些innerdiv（'errormessage'）添加到errormessagecontainer中。

实际上，我使用PHP Foreach执行此操作。

Answer 1

尝试使用position绝对，因为它的父级也设置为绝对，这将起作用。然后，您可以相对于其父级定位错误容器。 Fiddle

.errormessagecontainer{
position: absolute;
width: 20em;
border: 1px dashed rgb(255,0,0);
line-height: 2em;
bottom: 200px;
margin: 2px;
right: 80px;
}

Answer 2

但如果你添加错误消息，contentdiv的bottomborder扩大了自己，我不知道为什么

因为这就是position:relative 的工作原理 - 它会移动一个元素，关于它没有它的位置，并保留元素保留所需的原始空间

Answer 3

为内容容器设置最大高度，如下所示：

 max-height: 400px;

Answer 4

你可以添加display：none;到.errormessagecontainer并将其设置为在显示错误时阻止。

Answer 5

试试这个

<强> CSS

.errormessagecontainer {
    border: 1px dashed #FF0000;
    display: inline-block;
    left: 25em;
    line-height: 2em;
    margin: 2px;
    position: relative;
    top: -228px;
    width: 100px;
}

Fiddle

为什么内容<div>会自行扩大？</div>

5 个答案: