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的：在页脚部分创建列

回答

相关问题