css - 如何创建三列响应式页脚

Question

我需要帮助尝试使用 wordpress 在网站中构建三列页脚。无论我多么努力，我似乎​​都无法正确定位列。我实际上创建了一个子主题来覆盖主题附带的原始页脚。有人可以帮忙看看我的代码并请提供解决方案吗

    <footer>
    <div id="footerwrap">
        <div id="menu-footer">
            <h3>Links</h3>

                <ul>
                    <li><a href="http://127.0.0.1/vidniel/index.php/Our-Curriculum/">Our Curriculum</a></li>
                    <li><a href="http://127.0.0.1/vidniel/index.php/admission-procedure/">Why Choose us</a></li>
                    <li><a href="http://127.0.0.1/vidniel/index.php/apply-online/">Apply Online</a></li>
                    <li><a href="http://127.0.0.1/vidniel/index.php/news/">News</a></li>
                    <li><a href="http://127.0.0.1/vidniel/index.php/upcoming-events/">Events/Calendar</a></li>
                </ul>

        </div>

        <div id="social-footer">
            <h3>Links</h3>

                <ul>
                    <li><a href="http://127.0.0.1/vidniel/index.php/Our-Curriculum/">Our Curriculum</a></li>
                    <li><a href="http://127.0.0.1/vidniel/index.php/admission-procedure/">admission procedure</a></li>
                    <li><a href="http://127.0.0.1/vidniel/index.php/apply-online/">apply online</a></li>
                    <li><a href="http://127.0.0.1/vidniel/index.php/news/">news</a></li>
                    <li><a href="http://127.0.0.1/vidniel/index.php/upcoming-events/">upcoming events</a></li>
                </ul>

        </div>

        <div id="copyright-footer">

                Copyright &copy <?php echo date('Y'); ?> <a href="www.vidniel.com">vidniel Tech </a>
        </div>


        <div class="clear"></div>
    </div>
</footer>

CSS

#footerwrap{
    width: 100%;
    position:relative;
}

#menu-footer{
    width:30%;
    float:left;
    display:inline-block;
    margin:0 20px 0 0;
}

.clear {clear:both}

#social-footer{
    width:30%;
    float: right;
    display:block;
    margin:0 20px 0 0;

}

#copyright-footer{
    width:30%;
    float:right;
    display:inline;
    margin:0 20px 0 0;
}

类基

Answer 1

不确定你到底想完成什么，但你应该能够用下面的代码覆盖你所有的 CSS:

#footerwrap{
    width: 100%;
    position:relative;
}
#menu-footer, #social-footer, #copyright-footer{
  width:30%;
  margin:0 20px 0 0;
  display:inline-block;
  vertical-align:top;
}
@media (max-width: 750px){
  #menu-footer, #social-footer, #copyright-footer{
    width:100%;
    margin:0;
  }
}

这包括针对较小屏幕的媒体查询，以将您的页脚堆叠在 750 像素以下。