0

我有一个有点乱的标题。我想在不改变高度的情况下让这个标题基于全宽的图像。为了达到这种效果，我将标题图像浮动到左侧，并创建了一个 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;}
4

2 回答 2

0

对标题中的所有 div 标签使用 %

#header{
 width:100%;
 margin:0px;
 padding:0px;
}
于 2013-10-29T08:01:52.357 回答
0

如果我正确理解你的问题。它下降的原因是您的徽标图像大于它需要的（1074px）。您可以将其裁剪为仅需要的宽度（约 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;
}

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

于 2013-10-29T08:06:30.510 回答