在一行中浮动多个 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

浮动（在中间）：

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

弹性

（首选，因为您有更多对齐选项，特别是如果您的 children 小于 parent 可用 space 并且您希望它们均匀分布。它还允许垂直对齐- 如果有兴趣，请阅读有关 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 */
}

如果 none 的规则被其他规则覆盖，则上述两种方法都有效。因此，您需要用适当的选择器替换 grandparent、parent 和 child。

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

在一行中浮动多个 div

Floating multiple divs in one row

html

css

php

wordpress

footer