当左侧图像分辨率变化时，图像和页脚上的文本，按钮受到影响

-1

容器中有两个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>

CSS

@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%; 
    } 
}

来源

2016-12-26 Nakhhhh

您可以创建** JSFIDDLE **。 –

@Anil Talla，对不起，没有 – Nakhhhh

等待我试着 – Nakhhhh

这里是Updated JSFiddle。刚删除position: absolute为登录div和页脚页边距。如果要隐藏div使用display:none而不是visibility:hidden。因为它会隐藏起来，但它会占据空间。

来源

2016-12-26 06:51:16

当左侧图像分辨率变化时，图像和页脚上的文本，按钮受到影响

回答

相关问题