Html 当左侧图像分辨率更改时，文本、图像上的按钮和页脚会受到影响

容器中有两个div，左和右，左有背景和文本中的图像以及按钮，右有注册表，当我更改浏览器的分辨率时，右的内容正确地更改了分辨率，而左受影响的页脚和左的内容也显示不正确

HTML

<div class="container">
    <div class="content-left">
        <img src="images/image.jpg">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        <a class="more" href="about.php">LEARN MORE</a>
    </div>
    <div class="content-right">
        <section>
            <div id="container_demo">
            // WRAPPER - CODE OF REGISTRATION FORM
            </div>
        </section>
    </div>
    <div class="clear"></div>
</div> // Container END
<div class="footer">
    <p>
        <a href="#">qqqqqq </a>
        <a href="#">rrrrrr </a>
        <a href="#">tttttt </a>
        <a href="#">hhhhhhh </a>
        <a href="#">trtrtrtr </a>
        <a href="#">fdfdffd </a>
        <a href="#">sssssss </a>
        <a> - </a>
        Copyright Text
    </p>    
</div>

---

这是你的电话号码。刚刚删除了登录div的

position:absolute

，以及页脚的边距。如果要隐藏div，请使用

display:none

not

visibility:hidden

。因为它会被隐藏，但会占用空间。

你能创建JSFIDLE吗。@Anil Talla，对不起，不能

@media (min-width: 875px) {  
    .container {
        width: 100%;
    }
    .content-left {
        width: 50%;
        height:100%;
        float: left;
        position: relative;
    } 
    .content-right{
        width: 50%;
        height:100%;
        float: right;
    }
    .content-left img{
         visibility:visible;
         height:100%;
         width:100%;
    } 
    .content-left p {
        position: absolute;
        top: 30%;
        left: 40%;
        -ms-transform: translate(-40%, -40%);
        transform: translate(-40%, -40%);
        color: #FFF;
        font-family: Bookman Old Style;
        font-size: 20px;
        line-height: 45px;
        width: 92%;
    }    
    .content-left a.more {
        position: absolute;
        top: 62%;
        left: 32.7%;
        -ms-transform: translate(-32.7%, -60%);
        transform: translate(-50%, -60%);
        padding: 13px 40px;
        border-radius: 3px;
        font-size: 16px;
        font-family: 'Montserrat', sans-serif;
        font-weight: bold;
        color: #2a2344;
        background-color: #FFF;
    }
    .footer {
        text-align: center;
    }
    .footer p {
        color: #CCC;
        line-height: 25px;
        font-size:90%;
    }
    .footer a {
        color: #CCC;
        text-decoration: none;
        font-size:85%;
        padding-right:0.5%;
    }
    .footer a:hover {
        color: #FFF;
        font-size:80%;
    }
}