我真的希望有人可以在这里帮助我,因为我已经做了好几天了,并且没有任何头发可以拔掉!!!!
我正在使用Wordpress网站,并尝试将徽标和图像并排排列并有所回应。我已经使用'display:inline-flex'在Firefox和Chrome中完美地工作了但是知道它不适用于Safari宽度700px - 960px或iPad纵向视图,在这两种情况下徽标和图像堆叠在一起。< / p>
它们应该保持并排,直到屏幕宽度降至700px然后我很高兴他们能够堆叠。
如果有人能帮我解决这个跨浏览器工作所需的代码,我真的很感激。
以下是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;}
}
感谢您的光临。