Javascript 为什么DIV不展开以显示文本

小提琴：

部分CSS：

* {
  padding: 0;
  margin: 0;
}
body {
  font-family: Verdana, Tahoma;
  font-size: 11px;
}
b.title {
  color: #FFFFFF;
  clear: both;
  display:inline-block;
  padding: 0 0 5px 0;
  font-size: 12px;
  text-transform: capitalize;
}
b.message {
  color: #EDEDED;
  clear: both;
  display:block;
}

我遇到两个问题：

• 如果屏幕小于820像素，为什么文本警报会被切断？ （希望DIV展开以自动显示警报，而不显示 设置高度）

• 按下“暂停”按钮时，将显示“播放”按钮，但 它会丢失宽度和边距的CSS。（播放按钮不起作用 不拉伸，没有像“暂停”按钮那样的边距）[固定]

如何解决上述问题

如果屏幕小于820像素，为什么文本警报会被切断？（希望DIV展开以在不设置高度的情况下自动显示警报）

.msgAlert

具有

position:absolute

，绝对定位的元素在视口中不具有任何高度。从那里移除

位置：绝对

：

.msgAlert {
  /* position: absolute; */
  display: none;
  clear: both;
  overflow: hidden;
}

按下“暂停”按钮时，会显示“播放”按钮，但会丢失宽度和边距的CSS。（Play（播放）按钮不会拉伸，也没有像Pause（暂停）按钮那样的边距）

#playAlert

设置的

display:inline

非常难，即使您更改了，也不会。它必须是

块

您可以使用以下方法修复它：

$('#playAlert').css("display", "block").hide();

如果我删除

position:absolute

，消息会在淡出后跳转，然后进入

为容器指定一个

min height

，使其不会跳跃<代码>：）

如果我使用你的小提琴，“播放”按钮的宽度不同

：/

我把这个留给你，是为了让你明白。但你必须回答这个问题。以下是解决方案：

$('#playAlert').css("display", "inline-block").hide();

工作小提琴：

如果屏幕小于820像素，为什么文本警报会被切断？（希望DIV展开以在不设置高度的情况下自动显示警报）

.msgAlert

具有

position:absolute

，绝对定位的元素在视口中不具有任何高度。从那里移除

位置：绝对

：

.msgAlert {
  /* position: absolute; */
  display: none;
  clear: both;
  overflow: hidden;
}

按下“暂停”按钮时，会显示“播放”按钮，但会丢失宽度和边距的CSS。（Play（播放）按钮不会拉伸，也没有像Pause（暂停）按钮那样的边距）

#playAlert

设置的

display:inline

非常难，即使您更改了，也不会。它必须是

块

您可以使用以下方法修复它：

$('#playAlert').css("display", "block").hide();

如果我删除

position:absolute

，消息会在淡出后跳转，然后进入

为容器指定一个

min height

，使其不会跳跃<代码>：）

如果我使用你的小提琴，“播放”按钮的宽度不同

：/

我把这个留给你，是为了让你明白。但你必须回答这个问题。以下是解决方案：

$('#playAlert').css("display", "inline-block").hide();

---

工作小提琴：

我想你可以做一个变通方法，手动设置蓝色容器div的高度

您可以按如下方式更改html：

HTML

这是小提琴：

JS小提琴：

---

当您将msgAlert div的位置保持为绝对时，它修复了淡入淡出的问题，但是当您更改屏幕大小时，它需要表现为它的位置是相对的，但也应该具有淡入淡出的平滑度，我认为这可能很难实现。因此，当屏幕大小小于820px时，只需更改容器高度并手动设置即可。但是如果您不愿意牺牲动态高度，可以使用jquery或javascript实现。但我认为现在这应该可以解决您的问题。

我想您可以做一个变通方法，手动设置蓝色容器div的高度

您可以按如下方式更改html：

HTML

这是小提琴：

JS小提琴：

---

当您将msgAlert div的位置保持为绝对时，它修复了淡入淡出的问题，但是当您更改屏幕大小时，它需要表现为它的位置是相对的，但也应该具有淡入淡出的平滑度，我认为这可能很难实现。因此，当屏幕大小小于820px时，只需更改容器高度并手动设置即可。但是如果您不愿意牺牲动态高度，可以使用jquery或javascript实现。但我认为现在这应该可以解决您的问题。

如果您打开小提琴并缩小结果屏幕，您可以看到。如果不清楚，我会发布截图。谢谢。我想问题是你的html中有一个

溢出：隐藏的

，你可能想删除它，并且你可能想在msgAlert上保留一个

位置：相对的

divs@dvenkatsagar如果我删除

position:absolute

，消息会在淡出后跳转，然后进入。。。如果你打开小提琴并缩小结果屏幕，你可以看到。如果不清楚，我会发布截图。谢谢。我想问题是你的html中有一个

溢出：隐藏的

，你可能想删除它，并且你可能想在msgAlert上保留一个

位置：相对的

divs@dvenkatsagar如果我删除

position:absolute

，消息会在淡出后跳转，然后进入。。。不使用

位置的唯一问题是：绝对是当内容淡出然后进入时，它会跳跃，而不是平滑过渡。示例如下：现在就查看它。谢谢：）@SiKni8太棒了。这应该行得通。我登记了我的，很好。@SiKni8看到你的问题的最新答案。@SiKni8我看到了。故意让你来修理它。如果没有，我也可以补充
：（
那么您就不需要付出任何努力。
：（
不使用
位置：绝对；
的唯一问题是当内容淡出然后进入时，它会跳转并且不是平滑的过渡。示例如下：现在将其签出。而