Question

我有一个标题，有点乱。我想在没有改变高度的情况下在全宽度的基础上使用此标题。为了达到这个效果，我将标题图像浮动到左侧并创建了一个div，它在整个页面上填充图像的颜色。这样做之后，我在标题的右侧插入了三个图像。

我的问题是，当窗口调整大小时，图标会被推到标题图像下方，同时也会按照图像下方的填充颜色推动div。查看链接即可立即查看。

http://jsfiddle.net/theflyingmouse/RaPeG/1/

    <header id="masthead" class="site-header" role="banner">

    </div>
    <div class="header-background">

    <div class="new-header">

<a href="http://chrispicco.ca/" rel="home">
<img src="http://chrispicco.ca/wp-content/uploads/2013/10/copy-header-   alter.png" width="1074" height="90" alt="">
</a>
<a href="https://www.facebook.com/pages/Chris-Picco/10992716035">
    <img src="http://chrispicco.ca/wp-content/uploads/2013/10/iconmonstr-facebook-5-                 icon-48-e1382731781591.png"></a>
    <a href="http://www.youtube.com/user/ldrmusicnl">
    <img src="http://chrispicco.ca/wp-content/uploads/2013/10/iconmonstr-youtube-5-  icon-48-e1382731895640.png"></a>
    <a href="mailto:info@chrispicco.ca">
    <img src="http://chrispicco.ca/wp-content/uploads/2013/10/iconmonstr-email-10-icon-       32.png"></a>


    </div></div>






    <nav id="site-navigation" class="main-navigation" role="navigation">
        <h1 class="menu-toggle">Menu</h1>
        <a class="skip-link screen-reader-text" href="#content">Skip to         content</a>

        <div class="menu-main-navigation-container"><ul id="menu-main-        navigation" class="menu"><li id="menu-item-5" class="menu-item menu-item-type-custom menu-        item-object-custom menu-item-home menu-item-5"><a href="http://chrispicco.ca/">Home</a>        </li>
    <li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-        page menu-item-92"><a href="http://chrispicco.ca/about/">About</a></li>
    <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://chrispicco.ca/music/">Music</a></li>
    <li id="menu-item-105" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-105"><a href="http://chrispicco.ca/lyrics/">Lyrics</a></li>
    <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-  page menu-item-21"><a href="http://chrispicco.ca/videos/">Videos</a></li>
    <li id="menu-item-93" class="menu-item menu-item-type-custom menu-item-object-  custom menu-item-93"><a href="http://www.youtube.com/user/ldrmusicnl">Youtube Channel</a>  </li>
    <li id="menu-item-94" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-94"><a href="https://www.facebook.com/pages/Chris-Picco/10992716035">Official Facebook Page</a></li>
    </ul>
    </div>      
    </nav><!-- #site-navigation -->

</header>

这里有一些CSS ...

    .header-background {
    background-color: #d8edde;
    width: 100%;
    height:100px;
    }

    .main-navigation {
    background-color: #d8edde;
    width: 100%;
    margin-bottom: 25px;
    box-shadow: 0px 2px  #ADBEB2;}

Answer 1

对标题
中的所有div标记使用％

#header{
 width:100%;
 margin:0px;
 padding:0px;
}

Answer 2

如果我理解你的问题。它下降的原因是你的徽标图像比它需要的大（1074像素）。你可以把它裁剪成只需要的宽度（大约475px），这会有所帮助，但是当屏幕变小然后那个时它仍然会掉落图标。

要强制图标保持在右上角，您可以绝对定位。

将它们包裹在div中

HTML

<div class="social-container">
    <a href="https://www.facebook.com/pages/Chris-Picco/10992716035">
    <img src="http://chrispicco.ca/wp-content/uploads/2013/10/iconmonstr-facebook-5-icon-48-e1382731781591.png"></a>

    <a href="http://www.youtube.com/user/ldrmusicnl">
    <img src="http://chrispicco.ca/wp-content/uploads/2013/10/iconmonstr-youtube-5-icon-48-e1382731895640.png"></a>

    <a href="mailto:info@chrispicco.ca">
    <img src="http://chrispicco.ca/wp-content/uploads/2013/10/iconmonstr-email-10-icon-32.png"></a>
</div>

CSS

.social-container {
  position: absolute;   
  top: 20px;
  right: 20px;
}

更新了小提琴：http://jsfiddle.net/9NRL9/

调整大小时，自定义图标不会停留在标题的右侧

2 个答案: