在一行中浮动多个 div答案

【问题标题】：Floating multiple divs in one row在一行中浮动多个 div
【发布时间】：2018-09-24 17:56:30
【问题描述】：

我正在尝试在 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吗？

【问题讨论】：

你试过display:inline-block和vertical-align:top。
我尝试使用内联块。当我将它与垂直对齐结合起来时。但两者似乎都没有造成任何影响：/
我的意思是没有float:left。
我现在从 css 类中删除了除 display:inline-block 和 vertical-align:top 之外的所有标签。小部件的位置根本不动。但他们都挤在一起..
@blaner0，您提供的信息不足以让任何人为您提供明确的答案。我们需要知道当前应用于您的小部件的样式以及它们的特殊性以告诉您用什么覆盖它们。此外，您希望它们如何以较小的宽度显示也很重要。如果没有minimal reproducible example 和更多详细信息，就很难提供帮助。考虑到它是一个 WP，我知道大多数人发现很难提供 mcve。所以请提供一个可以检查你的问题的链接，我会告诉你怎么做

标签： php html css wordpress footer

【解决方案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 的内容）：

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 查询中指定如何以较低屏幕宽度显示小部件的规则，并根据主题的响应断点进行调整。

【讨论】：