Question

我遇到的问题是当浏览器重新调整大小时，页脚中的内容会相互正确堆叠。然而，当页脚重新调整它变得时髦时，它们就是一个点。我是新手，想知道他们是否是一个更好的方法。谢谢，我将附上jsfiddle文件来查看问题： http://jsfiddle.net/robontrix/h21fyywn/#&togetherjs=cjr35cIPDP

HTML页脚

 <footer>
    <div id="footer-right">
        <ul>
            <li>ABOUT US</li>
            <li><a href="">Contact Us</a></li>
            <li><a href="">FAQ's</a></li>
            <li><a href="">Site Map</a></li>
        </ul>
        <ul>
            <li>SUPPORT OUR CAUSE</li>
            <li><a href="">Donate</a></li>
            <li><a href="">Volunteer</a></li>
            <li><a href="">Fundraising Events</a></li>
        </ul>
        <ul>
            <li>FOLLOW US</li>
            <li>
                <a href="#Facebook"><img src="img/facebook-icon.png" alt="Facebook Logo" class="social-icon"></a>
                <a href="#Instagram"><img src="img/instagram-icon.png" alt="Instagram Logo" class="social-icon"></a>
                <a href="#Twitter"><img src="img/twitter-icon.png" alt="Twitter Logo" class="social-icon"/></a>
                <a href="#Pinterest"><img src="img/pinterest-icon.png" alt="Pinterest Logo" class="social-icon"/></a>
            </li>
        </ul>
    </div>
    <div id="footer-left">
        <p id="footer-slogan">BREAK THE <strong>SILENCE</strong> <br>AND <strong>CYCLE</strong>    OF ABUSE</p>
        <p id="copyright">Copyright&copy; 2014 International Child Advocacy Network</p>
    </div>
</footer>

CSS页脚

/**********************
FOOTER
**********************/
footer {
font-family: 'Open Sans', sans-serif;
max-width:950px;
background-color:#434a54;
font-size:0.75em;
clear:both;
color:#e6e9ed; overflow:auto;
margin: 0 auto;
padding:5px;
}
footer h3{
padding-left: .9em;
font-family: 'Open Sans', sans-serif;
}
footer ul {
display:inline-block;
list-style-type: none;
}
footer ul li{
list-style:none;
text-decoration:none;
margin-left: 1em;
}
footer ul li a{
color:#e6e9ed;
text-decoration:none;
}

footer a:hover {
color:#FFFFFF; /*Change hover color to make it more prominent*/
}


/**********************
RIGHT SIDE OF FOOTER - Contains links and social media icons
**********************/
#footer-right {
float:right;
margin-right:15px;
}

#footer-right li:nth-child(1) { /*Styles footer headers*/
font-weight:bold;
font-size:1.2em;
padding-bottom:4px;
}

.social-icon {
display:inline-block;
width:24px;
height:24px;
margin-bottom:22.7px; /*controls height of "follow us" in footer*/
padding:1px;
border-radius: 20%;
}

/**********************
LEFT SIDE OF FOOTER - Contains copyright and slogan
**********************/
#footer-left {  
float:left;
padding-left: 2em;
text-align:left;
font-size: 1.35em;
display:inline-block;
line-height: 1.5em;
}

#footer-slogan {
font-family: 'Georgia', 'Droid Serif', sans-serif;
}

#copyright{
font-size: .75em;
text-align:left;
margin-top: 5px; 
display:inline-block;
font-family: 'Open Sans', sans-serif;
}

Answer 1

存在空间的原因是因为你的页脚正在做一个＆＃34; float：right;＆＃34;。然而，当小于888px时，没有足够的空间，因此向下推左脚，右脚占据任何空间的右侧。

您只需要使用css媒体查询进行响应式设计。在您的特定情况下，您可以执行以下操作：

    @media only screen and (max-width: 888px) {
        #footer-right {
            float: left;
        }

        /*align footer-right to footer-left*/
        #footer-right ul {
            padding-left: 20px;
            padding-right: 20px;
        }
    }

我已更新jsfiddle以显示结果。有关css媒体查询和示例的更多信息，请参阅css-tricks。

页脚调整大小问题

1 个答案: