0

我是 HTML/CSS 的新手——如果我不这样做，就假设我不知道。

我想要这些在 headerimg 右侧的 site-title 和 site-desc 元素；当然，它们在某些浏览器宽度下以这种方式显示，带有浮动选项。尽管浏览器宽度尽可能大，我希望它们保持相邻。

另外，我想让标题容器扩展以容纳它们 - 下面的主体是不同的颜色，因此随着浏览器宽度的缩小，图像会向下移动。

以下是 header.php 中的相关内容： 

<hgroup>
   <?php
       // Check to see if the header image has been removed
       $header_image = get_header_image();
       if ( ! empty( $header_image ) ) :
   ?>
  <h1 id="site-logo">
       <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
            <img src="<?php header_image(); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
       </a>
  </h1>
      <?php endif; // end check for removed header image ?> 
<div id="headertext"><span> 
    <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
    <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2></span>
        </div>
            <div id="headerimg">
             <img src="/wp-content/themes/catch-box/images/Puzz_letters.png" align="left" />
        </div>
</hgroup>

这是 style.css：

#headertext {
    float: right;
    margin-bottom: 20px;
}

#headerimg {
    float: left;
    margin-bottom: 20px;
}
4

1 回答 1

0

PHP：

<hgroup>
<?php
   // Check to see if the header image has been removed
   $header_image = get_header_image();
   if ( ! empty( $header_image ) ) :
?>

<div id="site-logo">
   <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
      <img src="<?php header_image(); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
   </a>
</div>

<?php endif; // end check for removed header image ?> 

<div id="headertext">
    <h1 id="site-title">
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
    </h1>

    <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>

<div id="headerimg">
  <img src="/wp-content/themes/catch-box/images/Puzz_letters.png" align="left" />
</div>

<div class="clear"> </div>

</hgroup>

<div class="clear"> </div>

CSS：

#site-logo {
  width: 100px;
  height: 100px;
  float: left;
  margin-right: 30px;
}

#headertext {
  float: left;
}

#site-title {
  margin-bottom: 20px;
}

.clear {
  clear: both; /* Look up what clear:both does. */
}

@media only screen and (max-width: 900px) { /* define your smaller screen styles inside this */
    #site-logo, #headertext {
     float: none;
    }     

}

在较小的屏幕中，使用 CSS（不是一种好的方式）不可能将徽标的位置更改为底部。

于 2013-02-07T08:08:30.800 回答