Question

我目前正在寻找移动div来附加到另一个没有包裹它的div的底部。

我正在使用一个名为Divi的Word Press主题，一个所见即所得的编辑器，客户希望菜单位于实际Divi编辑器中的另一个div下面，而菜单是由HTML和PHP组合生成的< / p>

<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文件。

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

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

1 个答案: