Question

我试图在WordPress页脚中显示彼此相邻的4个小部件。我添加了functions.php和footer.php个文件，以便加载小部件内容。

但我不确定如何将小部件显示在彼此旁边，并从与标题内容相同的位置开始，就像常规的4列页脚WordPress主题一样。

经过多次尝试，我设法将它们全部显示在一行中。 left-＆amp; right-margins不再工作了。

css部分如下所示：

.widgetfooter {
            margin-left: auto;
            margin-right: auto;
            display: flex;
            float: left;
            width: 15%;
            max-width: 1200px;
}

我将小部件包含在footer.php文件中，如下所示：

<?php if ( is_active_sidebar( 'footer-sidebar1' ) ) : ?>
    <div class="footer-widget-area" >
        <?php dynamic_sidebar( 'footer-sidebar1' ); ?>
    </div>
<?php endif; ?>

在functions.php：

中

register_sidebar( array(   
    'name' => __( 'Footer Widget Area1', 'scentchild' ),
    'id' => 'footer-sidebar1',
    'description' => __( 'Appears on the footer, which has its own widgets', 'footer-sidebar1' ),
    'before_widget' => '<div id="%1$s" class="widgetfooter">',
    'after_widget' => '</div>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>',
) );

有人可以帮我解决这个问题吗？

Answer 1

结构：

grandparent
  parent 
    child
    child
    child
    child

浮动（中间）：

grandparent { 
  text-align:center;
}
parent {
  margin: 0 auto;
  max-width: /* desired content width, in px, according to theme
              * mind responsiveness here...
              */
}
child {
  margin: 0; 
  display: inline-block; 
  width: 25%; 
  float: left;
}

Flex

（首选，因为您有更多的对齐选项，特别是如果您的孩子小于父可用空间并且您希望它们均匀分布。它还允许垂直对齐 - 如果感兴趣，请阅读有关flex的更多内容）：

grandparent, parent { 
  display:flex; 
  justify-content: center; /* horizontal alignment, 
                            * if flex-direction is row (default) 
                            */
}
child {
  flex: 0 0 25%;
}
/* optional: */
parent {
  max-width: ... /* desired max-width here */ 
  align-items: center; /* vertical alignment */
}

如果其他规则都没有覆盖任何规则，则上述两种方法都可以正常工作。因此，您需要使用适当的选择器替换grandparent，parent和child。

您还需要指定如何在@media个查询中以较低的屏幕宽度显示小部件的规则，并使用主题的响应性断点进行调整。

在一行中浮动多个div

1 个答案: