2016-02-22 45 views
0

當我使用響應式媒體查詢時,我希望我的頁腳內部div包裝從右到下移動到左下和中間。但是,當從右向左移動最後一個元素「聯繫我們」時,它會在下面,但不會居中,前一個「跟隨我們」的div與「版權」不在同一行。CSS響應將div從右側移動到左下角和中間

The Idea Here Codepen here

HTML 
<!doctype html> 
<html> 

<head> 
<title>Agency</title> 
<meta charset="utf-8"> 
<link href="footer.css" rel="stylesheet" merdia="handheld"> 
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
</head> 

<body> 
<div class="wrapper"> 

    <div class="header"> 
     <h1>Header</h1> 
    </div> 

    <div class="footer"> 
     <h1>Footer</h1> 
      <div class="copyright"> 
       <h3>Copyright</h3> 
      </div> 

      <div class="social"> 
       <h3>Follow us:</h3> 
       <p> Twitter, Facebook, Youtube</p> 
      </div> 

      <div id="contactfooter"> 
       <h2> Contact </h2> 
       <p>Contact Form would go here</p> 
      </div> 
    </div> 
</body> 

CSS 
/*footer.css*/ 
*{ 
margin:0; 
padding:0; 
font-family: 'Open Sans', sans-serif; 
} 

body 
{ 
background-color:#DCDCDC; 
} 

.wrapper{ 
max-width:1200px; 
width:100%; 
margin:auto;  
} 

.header{ 
width:100%; 
background-color:green; 
height:20vh; 
} 

.footer{ 
width:100%; 
background-color:orange; 
font-size:1em; 
overflow:hidden; 
padding-bottom:3%; 
clear:both; 
padding-top:5%; 
border-top:3px solid #0099FF; 
color:black; 
} 

.copyright{ 
width:25%; 
background-color:red; 
float:left; 
margin-left:10%;  
} 

.copyright p{ 

font-size:0.938em; 
line-height: 2em; 
} 

.social{ 
width:20%; 
background-color:yellow; 
float:left; 
margin-left:8%; 
} 

#contactfooter{ 
width:20%; 
background-color:blue; 
float:right; 
margin-right:10%; 
display:block; 
} 

#contactfooter h2, #contactfooter{ 
    font-size:1.250em; 
    text-align: center; 
} 

/*---------MEDIA QUERIES----------*/ 

@media (max-width:1020px){ 
.copyright{ 
    margin-left:25%; 
    float:left; 
    } 
.social{ 
    float:right; 
    margin-right:25%; 
} 

#contactfooter{ 
    float:left; 
    width:30%; 
    margin:auto; /*does not margin to the center of the footer wrapper.. why?*/ 
    /*margin-right:0%; 
    margin-left:45%;*/ 


    } 
} 

回答

0

你並不需要改變他們的利潤更小的屏幕,只是解決他們的寬度。

相關問題