代码之家 › 专栏 › 技术社区 › Si8

为什么DIV不展开显示文本

css html jquery javascript

Si8 · 技术社区 · 9 年前

部分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展开以自动显示警报设置高度)
~~按下“暂停”按钮时,将显示“播放”按钮,但它将丢失宽度和边距的CSS。(“播放”按钮可以不拉伸,没有“暂停”按钮那样的边距)~~ [固定]

我如何解决上述问题。

2 回复 | 直到 9 年前

dvenkatsagar 9 年前

我想您可以做一个变通方法,手动设置蓝色容器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来实现。但我认为现在这应该能解决你的问题。

Praveen Kumar Purushothaman 9 年前

如果屏幕小于820px,为什么文本警报会被切断?(希望DIV展开以自动显示警报,而不设置高度)

这个 .msgAlert 有 position: absolute 并且绝对定位的元素在视口中不占据任何高度。正在删除 位置:绝对 从那里工作:

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

按下“暂停”按钮时,会显示“播放”按钮,但会丢失宽度和边距的CSS。(“播放”按钮不会拉伸,也没有“暂停”按钮那样的边距)

这个 #playAlert 有 display: inline 非常努力地设定,即使你改变了,它也不会。它必须是 block .

您可以使用以下方法进行修复:

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

如果我删除 位置:绝对 消息在淡出时跳转,然后进入。。。

给一个 min-height 以便容器不会跳跃。 :)

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

我把这个留给你想故意。但你必须回答这个问题。以下是解决方案:

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

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