當左側圖像分辨率變化時，圖像和頁腳上的文本，按鈕受到影響

-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

當左側圖像分辨率變化時，圖像和頁腳上的文本，按鈕受到影響

回答

相關問題