Я действительно надеюсь, что кто-то может помочь мне здесь, поскольку я работал над этим в течение нескольких дней, и у меня нет волос, чтобы вытащить !!!!Выравнивание двух DIV с изображениями рядом друг с другом и реагирование
Я работаю над сайтом Wordpress и стараюсь, чтобы логотип и изображение выстроились рядом друг с другом и были несколько отзывчивыми. Я отлично работаю в Firefox и Chrome, используя «display: inline-flex», но знаю, что не будет работать для просмотра в формате Safari шириной 700 пикселей - 960 пикселей или iPad, где в обоих случаях логос и изображение стекаются друг над другом.
Они должны оставаться бок о бок, пока ширина экрана не упадет до 700 пикселей, тогда я счастлив, что они будут складываться.
Если бы кто-нибудь мог помочь мне с кодом, необходимым для получения этих рабочих кросс-браузеров, я бы ДЕЙСТВИТЕЛЬНО оценил это.
Вот site
Я не думаю, что это усложняет дело, но код для логотипа PHP, а не прямой HTML код для объявлений в нижней части есть HTML (добавленный мной)
<?php
$use_header_banner = et_get_option('lucid_468_header_enable', 'false');
?>
<div id="pt-header" class="container">
<div id="logo-area"<?php if ('on' == $use_header_banner) echo ' class="header_banner clearfix"'; ?>>
<a href="<?php echo esc_url(home_url('/')); ?>">
<?php
$color_scheme = et_get_option('lucid_color_scheme', 'Orange');
$color_scheme = ('Orange' == $color_scheme) ? '' : '-' . strtolower($color_scheme);
$logo = (($user_logo = et_get_option('lucid_logo')) && '' != $user_logo) ? $user_logo : get_template_directory_uri() . "/images/logo{$color_scheme}.png";
?>
<img src="<?php echo esc_url ($logo); ?>" alt="<?php echo esc_attr(get_bloginfo('name')) ; ?>" id="logo"/>
</a>
<?php if ('on' == $use_header_banner){ ?>
<div id="top_banner">
<?php
if (($lucid_468_header_adsense = et_get_option('lucid_468_header_adsense')) && '' != $lucid_468_header_adsense) echo($lucid_468_header_adsense);
else { ?>
<a href="<?php echo esc_url(et_get_option('lucid_468_header_url')); ?>"><img src="<?php echo esc_attr(et_get_option('lucid_468_header_image')); ?>" /></a>
<?php } ?>
</div> <!-- end #top_banner -->
<?php } ?>
</div>
<div id="head-ad">
<a href="http://www.focus-training.com/"><img src="http://sievecreative.co.uk/development/testsite/wp-content/uploads/ads/header.png" /></a>
</div>
</div> <!-- end .container -->
Который заканчивает тем, как этот
<div id="pt-header" class="container">
<div id="logo-area">
<a href="http://sievecreative.co.uk/development/testsite/">
<img id="logo" alt="PT Magazine" src="http://sievecreative.co.uk/development/testsite/wp-content/uploads/2013/09/logo.jpeg">
</a>
</div>
<div id="head-ad">
<a href="http://www.focus-training.com/">
<img src="http://sievecreative.co.uk/development/testsite/wp-content/uploads/ads/header.png">
</a>
</div>
</div>
Здесь есть все связанные с CSS
#pt-header {
margin-bottom: -2px;
}
#logo-area img {
float: left;
padding-bottom: 11px;
padding-top: 20px;
clear: both;
}
.container #logo-area {
margin-bottom: 0px;
text-align: center;
}
#head-ad img {
padding-left: 40px;
}
img {
height: auto;
max-width: 100%;
width: auto;
}
@media only screen and (min-width: 700px) and (max-width: 960px) {
#pt-header {display: inline-flex;}
}
Спасибо, что посмотрели.