我如何創建一個三列響應頁腳

Question

我需要幫助，試圖在wordpress網站建立一個三欄目頁腳。無論我多努力嘗試，我都無法得到列的定位權。我實際上創建了一個子主題來覆蓋主題附帶的原始頁腳。有人可以幫忙看一下我的代碼和親切profer解決方案請

<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; 
} 

Banky

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; 
    } 
} 

這包括媒體查詢更小r屏幕將您的頁腳堆疊在750px以下。