Question

当我使用响应式媒体查询时，我希望我的页脚内部div包装器从右到左移动到左下方。但是，当从右到左移动最后一个元素“联系我们”时，它会向下移动，但它不会居中，而前一个div“跟随我们”并不是与“版权”相同的位置。

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%;*/


   }
 }

Answer 1

您不需要更改较小屏幕的边距，只需修正它们的宽度。

CSS响应移动div从右到左下方和中心

1 个答案: