将两个 DIV 与图像并排对齐并做出响应

Question

我真的希望有人可以在这里帮助我，因为我已经为此工作了好几天，而且没有任何头发可以拔掉！！！！

我在一个 Wordpress 网站上工作，并试图让徽标和图像并排排列并有点响应。我已经使用'display：inline-flex'让它在Firefox和Chrome中完美运行，但知道这不适用于Safari宽度700px - 960px或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;}
}

感谢收看。

Answer 1

感谢所有看过的人，我现在已经使用响应式网格系统link对此进行了排序