Question

部分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;
}

我遇到两个问题：

如果屏幕小于820px，为什么文本警报被切断？（希望DIV能够自动显示警报而不会显示警报设定高度）
~~按“暂停”按钮时，会显示“播放”按钮它失去了WIDTH和MARGIN的CSS。（“播放”按钮可以不伸展，没有像“暂停”按钮那样的保证金。）~~ [已固定]

如何解决上述问题。

Answer 1

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

.msgAlert有position: absolute，绝对定位的元素在视口中不占任何高度。从那里删除position: absolute：

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

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

#playAlert display: inline非常难以设置，即使你改变了，也不会。它必须是block。

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

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

如果我删除了position: absolute，则消息会在淡出时跳转，然后在...

为容器指定min-height，使其不会跳转。 :)

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

我离开了这个让你弄清楚故意。但是你回答了这个问题。这是解决方案：

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

工作小提琴：https://jsfiddle.net/e34pzhu3/

Answer 2

我猜你可以做一个解决方法，你可以手动设置蓝色容器div的高度。

您可以像这样更改html：

HTML

<div class="blue-container" style="position: relative; overflow: hidden; width: 98%; padding: 1%; background: #0070C6;">
    <div style="overflow: hidden; clear: both; text-align: left; position: absolute; right: 2%; top: 8%; z-index: 9999999; color: #FFF;">
        <span id="msgCurr">1</span>/<span id="msgOf"></span>
    </div>
    <div class="light-blue-container" style="position: relative; overflow: hidden; width: 100%; margin: 0 auto; background: #009DF5;">
        <div class="section group brClear">
            <div class="col span_short vertAlignT span_pad_all">
                <a href="javascript:void(0);" class="transparent" id="prevAlert">Previous</a>
                <a href="javascript:void(0);" class="transparent" id="playAlert">Play</a>
                <a href="javascript:void(0);" class="transparent" id="pauseAlert">Pause</a>
                <a href="javascript:void(0);" class="transparent" id="nextAlert">Next</a>
            </div>
            <div class="col span_long vertAlignT span_pad_all alertHolder">
                <div class="msgAlert">
                    <b class="title">The title alert goes here #1</b>
                    <b class="message">The alert message will go here 1...</b>
                </div>
                <div class="msgAlert">
                    <b class="title">The title alert goes here #2</b>
                    <b class="message">The alert message will go here 2...</b>
                </div>
                <div class="msgAlert">
                    <b class="title">The title alert goes here #3</b>
                    <b class="message">The alert message will go here 3...</b>
                </div>
                <div class="msgAlert">
                    <b class="title">The title alert goes here #4</b>
                    <b class="message">The alert message will go here 4...</b>
                </div>
            </div>
        </div>
    </div>
</div>

在css中，你可以做的是，使用媒体查询，保持这样：

CSS

@media only screen and (max-width: 820px) {

    .light-blue-container{
      height:100%
    }

    .blue-container{
      height:21em
    }

...

这是小提琴：

JS小提琴：https://jsfiddle.net/st8q8z5g/9/

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

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

2 个答案: