php - 在一行中 float 多个 div

Question

我试图在 WordPress 页脚中并排显示 4 个小部件。我添加到 functions.php 和 footer.php 文件中，以便加载小部件内容。

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

经过多次尝试，我设法将它们全部显示在一行中。 left- 和 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>',
) );

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

Answer 1

结构:

grandparent
  parent 
    child
    child
    child
    child

float (在中间):

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

(首选，因为您有更多对齐方式选项，尤其是当您的 child 小于父级可用空间并且您希望它们均匀分布时。它还允许垂直对齐 - 如果有兴趣，请阅读有关 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 查询中指定如何在较低的屏幕宽度上显示小部件的规则，并根据主题的响应断点进行调整。