您正在以正确的方式思考,希望以下代码能够提供帮助。您可以引入媒体查询,但以下版本始终响应。
footer { position: fixed; left: 0; bottom: 0; width: 100%; background-color: #e229a3; color: white; text-align: center; } footer .content-wrapper { width: 30%; font-size: 1.125em; display: inline-block; float: right; } footer .content-wrapper p { color: #fff; font-size: 1.125em; text-align: right; padding-right: 40px; margin: 5px 0; } footer a { color: #000000; text-decoration: none; } footer .social-icons { padding: 0 30px 10px 0; justify-content: flex-end; float: right; } footer .social-icons p { width: 30px; height: 30px; margin: 0 0 0 18px; } footer .social-icons p i { font-size: 1.125em; } footer .copyright { font-size: 1.125em; width: 70%; text-align: left; float: left; margin: 9px 0; } footer .copyright p { padding-left: 10px; } footer .social-icons div { min-height: 30px; min-width: 30px; float: right; margin: 0 5px; border: 1px dotted black; }
<p>Hi Silk, I think this might be what you're looking for </p> <footer> <div class="content-wrapper"> <p>Contact</p> <div class="social-icons"> <div> <a href="mailto:GracieArtAttack@gmail.com"><i class="fas fa-envelope"></i></a> </div> <div> <a href="https://www.instagram.com/skillcrush/" target="_blank"><i class="fab fa-instagram"></i></a> </div> </div> </div> <div class="copyright"> <p>Copyright 2018 | Unplugged</p> </div> </footer>