В настоящее время я ищу, чтобы переместить div, чтобы прикрепить к нижней части другого div, который не обертывает его.Как подключить не-дочерний div к нижней части другого div
Я использую тему Word Press под названием Divi, редактор wysiwyg, и клиент хочет, чтобы меню находилось ниже другого div, который находится в реальном редакторе Divi, в то время как меню генерируется комбинацией 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 в контент, это еще одно жизнеспособное решение.
Это легко сделать с положением: абсолютным и верхним: число, однако, это не отзывно и потребует нескольких медиа-запросов при нечетных контрольных точках, поскольку div, с которым ему нужно реагировать, становится выше по мере того, как контент сбрасывается.
К счастью, клиент хочет, чтобы он перекрывал div ниже своего анкера, поэтому нам не нужно учитывать высоту div, чтобы оттолкнуть его дальше.
Я хотел бы знать, есть ли более простой способ сделать это, что является более чистым, чем несколько медиа-запросов с различными верхними значениями.
В идеале, решение будет чистым css.
Спасибо!