如何将非子 div 附加到另一个 div 的底部

Posted 2023-02-24

【中文标题】如何将非子 div 附加到另一个 div 的底部

【英文标题】：How to attach a non-child div to the bottom of another div

【发布时间】：2016-11-05 15:38:04

【问题描述】：

我目前正在寻找移动一个 div 以附加到另一个未包装它的 div 的底部。

我正在使用一个名为 Divi 的 Word Press 主题，这是一个所见即所得的编辑器，并且客户端希望菜单位于实际 Divi 编辑器中的另一个 div 下方，而菜单是由 html 和 php 的组合生成的

<div id="top-header"<?php echo $et_top_info_defined ? '' : 'style="display: none;"'; ?>>
        <div class="container clearfix">

        <?php if ( $et_contact_info_defined ) : ?>

            <div id="et-info">
            <?php if ( '' !== ( $et_phone_number = et_get_option( 'phone_number' ) ) ) : ?>
                <span id="et-info-phone"><?php echo et_sanitize_html_input_text( $et_phone_number ); ?></span>
            <?php endif; ?>

            <?php if ( '' !== ( $et_email = et_get_option( 'header_email' ) ) ) : ?>
                <a href="<?php echo esc_attr( 'mailto:' . $et_email ); ?>"><span id="et-info-email"><?php echo esc_html( $et_email ); ?></span></a>
            <?php endif; ?>

            <?php
            if ( true === $show_header_social_icons ) 
                get_template_part( 'includes/social_icons', 'header' );
             ?>
            </div> <!-- #et-info -->

        <?php endif; // true === $et_contact_info_defined ?>

            <div id="et-secondary-menu">
            <?php
                if ( ! $et_contact_info_defined && true === $show_header_social_icons ) 
                    get_template_part( 'includes/social_icons', 'header' );
                 else if ( $et_contact_info_defined && true === $show_header_social_icons ) 
                    ob_start();

                    get_template_part( 'includes/social_icons', 'header' );

                    $duplicate_social_icons = ob_get_contents();

                    ob_end_clean();

                    printf(
                        '<div class="et_duplicate_social_icons">
                            %1$s
                        </div>',
                        $duplicate_social_icons
                    );
                

                if ( '' !== $et_secondary_nav ) 
                    echo $et_secondary_nav;
                

                et_show_cart_total();
            ?>
            </div> <!-- #et-secondary-menu -->

        </div> <!-- .container -->
    </div> <!-- #top-header -->
<?php endif; // true ==== $et_top_info_defined ?>

我尝试将上面的代码插入到代码模块中，因为这实际上是最简单的解决方案，但事实证明，它不支持 PHP。 :( 如果有一种安全的方法可以在内容中启用 php，这是另一个可行的解决方案。

这很容易通过 position: absolute 和 top: number 完成，但是，这不是响应式的，并且需要在奇数断点进行多次媒体查询，因为它需要响应的 div 会随着内容被下推而变得更高。

幸运的是，客户端希望它与锚 div 下方的 div 重叠，因此我们不需要考虑 div 的高度来将其进一步向下推。

我想知道是否有一种更简单的方法来做到这一点，它比具有不同顶部值的多个媒体查询更干净。

理想情况下，解决方案是纯 css。

谢谢！

【参考方案1】：

我最近有一个 DIVI 项目，它需要很多自定义的东西，而最好的解决方案几乎总是在我的子主题中编辑 php 文件。

但是，如果您在内容中需要它，最好在短代码中使用它。