Question

当我在运行下面的代码后缩小屏幕尺寸时，image phone.png和所有文本跳出位置。我怎样才能阻止这种情况发生。

的CSS：

    <style type="text/css">
    #wrapperlp {
        width: 100%;
        height:700px;
        margin-left:13%;
        margin-top:5%;
        background-image:url(https://***/blackbg.png);
        background-repeat:no-repeat;
        opacity:1;

    }

    #designbg {
        background-repeat:no-repeat;
        margin-left: 5%;
        padding-top: 3%;           
    }

文字样式

    #ad_head {           
        color: #f2852d;
        font-weight: bold;
        margin-left: 28%;
        margin-top: -21.5%;
        font-size: 21px;
    }

     #ad_message {
        margin-left: 28%;
        font-size:10px;
        color:white;
        font-weight:normal;
    }

style for phone.png image：

    #ad_logo {
        height: 500px;
        margin-left: 2%;
        margin-top: -42%;

    }

    #logobtm {
        margin-left: 2%;
        margin-top: -42%;
    }
</style>

HTML：

<div id="wrapperlp">
    <div id="designbg"><img src="https://*****/image.png" />
       <div id="ad_logo"><img src="https://****phone.png" /></div>

        <div>   
            <div id="ad_head">Text1<br />Text...</div>
            <div id="ad_message">Text2</div>
            <div id="logobtm"><img src="**.png" /></div>
        </div>

    </div>
</div>

Answer 1

您使用的是margin-top百分比。但是，边距的百分比是相对于窗口宽度测量的，而不是窗口高度！

请参阅http://www.w3.org/TR/CSS2/box.html#value-def-margin-width

解决方案：使用其他单位表示元素的边距，或使用其他方式将它们放在屏幕上（例如top:5%与position:absolute组合）。

当屏幕尺寸减小时，停止图像跳出位置

1 个答案: