2 개의 DIV를 이미지와 나란히 정렬하고 반응 적으로 만들기

나는 지금이 일을 해왔고 어떤 머리카락도 빠져 나가지 않았기 때문에 누군가가 나를 도울 수 있기를 정말로 바라고 있습니다 !!!!2 개의 DIV를 이미지와 나란히 정렬하고 반응 적으로 만들기

저는 Wordpress 사이트에서 일하고 있습니다. 로고와 이미지를 나란히 배치하고 다소 반응이 좋으려고합니다. 나는 '디스플레이 : 인라인 - 플렉스'를 사용하여 Firefox 및 Chrome에서 완벽하게 작동하고 있지만 사파리 너비 700px - 960px 또는 iPad 세로보기에서 작동하지 않습니다. 두 경우 모두 로고와 이미지가 서로 쌓입니다.

화면 폭이 700px가 될 때까지 나란히 놓여 있어야합니다. 그런 다음 화면이 쌓여서 기쁘게 생각합니다.

누군가가이 크로스 브라우저를 사용하는 데 필요한 코드로 나를 도울 수 있다면 정말 고맙겠습니다. 여기

내가이 문제를 복잡하게하지만 로고의 코드가 바로 HTML보다는 PHP를 생각하지 않는 site

이며, 하단에있는 고라의 코드는 (나 추가) HTML

입니다 다음은이

<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>

처럼 보이는 끝

 <?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 -->

모든 관련 CSS

,536,913입니다

#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;} 
}

감사합니다.

출처

2013-09-30 Andy Harvey