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

Question

我目前正在寻找移动一个 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。

谢谢!

Answer 1

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

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