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

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

如果我正确理解你的问题。它下降的原因是您的 Logo 图像比它需要的更大(1074 像素)。您可以将其裁剪到所需的宽度(大约 475 像素)，这会有所帮助，但当屏幕变小时它仍然会丢弃图标。

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

将它们包裹在一个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;
}

更新 fiddle :http://jsfiddle.net/9NRL9/