WordPress的：在頁腳部分創建列

目前我的頁腳是這樣的： enter image description here WordPress的：在頁腳部分創建列

我使用下面的HTML：

<div class="mainfooter"> 
    <!-- 1/2 --> 
    <div class="column"> 
     <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('footer-left-widget')) ?> 
     <h3> Customer Service </h3> 
    </div> 
    <div class="column"> 
     <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('footer-right-widget')) ?> 
     <h3> Contact Us</h3> 
     <div class="fb-like-box" data-href="https://www.facebook.com/pages/LIdylle-Idyll/466829146717006" data-width="30" data-height="60" data-colorscheme="light" data-show-faces="false" data-header="true" data-stream="false" data-show-border="true"></div> 
    </div> 
    <!-- /End 2/2 --> 
</div>

和我的CSS是這樣的：

.site-footer .mainfooter .column {    
    position: relative; 
    width: 44%; 
    padding: 3%; 
    float: left;     
}    
.site-footer .mainfooter .column:nth-child(1) { left: 50%; } 
.site-footer .mainfooter .column:nth-child(2) { right: 50%; } 
.site-footer .mainfooter:before .mainfooter:after{ 
    content: " "; 
    position: absolute; 
    z-index: -1; 
    top: 0; 
    left: 50%; 
    width: 50%; 
    height: 100%; 
    background: #ccc;  
} 

.site-footer .mainfooter:after{ 
    left: 50%; 
    background: #eee;  
}

我通過以前的評論和帖子相同的如：Two column layout in Wordpress?和嘗試所有在這裏提到的方法：http://css-tricks.com/fluid-width-equal-height-columns/但我仍然無法解決這個問題。

我在functions.php文件中添加以下代碼太：

if (function_exists('register_sidebar')) { 
    register_sidebar(array(
     'name' => 'Footer Left', 
     'id' => 'footer-left-widget', 
     'description' => 'Left Footer widget position.', 
     'before_widget' => '<div id="%1$s">', 
     'after_widget' => '</div>', 
     'before_title' => '<h2>', 
     'after_title' => '</h2>' 
    )); 

    register_sidebar(array(
     'name' => 'Footer Right', 
     'id' => 'footer-right-widget', 
     'description' => 'Right Footer widget position.', 
     'before_widget' => '<div id="%1$s">', 
     'after_widget' => '</div>', 
     'before_title' => '<h2>', 
     'after_title' => '</h2>' 
    ));

我想創建每列下面內容兩列，但我不能正常工作一樣。

來源

2014-01-12 nathandrake

今天當我檢查出二十四個主題的實現時，我看到他們正在使用jquery Masonry插件創建多列頁腳。 – Gasim

我認爲這是使用CSS的簡單情況..如果沒有解決方案可以到達 – nathandrake

你的CSS中的大部分代碼是沒有必要的。您需要創建正確的規則，並用這樣的左側面板：

.column { 
    display: inline-block; 
    width: 44%; 
    padding: 3% 
} 

.column-left { 
    float: left; 
} 

.column-right { 
    float: right; 
    clear: right; 
}

而一個wraper標籤添加到兩個列：

.row { 
    display: inline-block; 
    clear: left; 
    width: 100%; 
}

請看看這個fiddle

來源

2014-01-12 19:22:28 sousatg

謝謝你的工作，將研究石工 – nathandrake

WordPress的：在頁腳部分創建列

回答

相關問題