1

我想知道是否有人可以帮助我解决我遇到的这个（可能很容易）问题。我要做的是将我的徽标放在我网站的左侧，但将它放在两个 div 上方，其中包含顶部的社交媒体链接和另一个 div 中的网站菜单（向右对齐）。我在这里提供了我想要实现的图像：http: //i59.tinypic.com/155j7tt.jpg（蓝色图像是徽标的形状以及我希望它在 div 上方的外观）

我正在使用 getskeleton 框架以防万一。

目前，前两个 div 的代码如下：

    <div class="bars social">
      <div class="container">
        <div class="sixteen columns right">
            <img src="_img/social/facebook.png" alt="Facebook"> <img src="_img/social/twitter.png" alt="Twitter"> <img src="_img/social/youtube.png" alt="Youtube">
        </div>
      </div>
    </div>

    <div class="container">
      <div class="sixteen columns right">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
        </ul>
      </div>
    </div>

现在我的问题是我在哪里/如何放置我的代码，以便徽标可以漂浮在这两个 div 上方（并且还可以悬挂在它们下方一点，如图所示）。

我所做的一切要么把它放在一个之上，要么放在另一个之上，但不是两者兼而有之。

更新：

全屏版的CSS如下：

.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.container .sixteen.columns { width: 940px; }
.bars {backgound-color:#FFF;}
.right {text-align:right;}
.bars.social {background-color:#101116; color:#FFF; height:29px; padding-top:4px; border-bottom:2px solid #063;}
4

1 回答 1

0

这是一种添加徽标的方法，使用绝对定位将其推到社交媒体链接的顶部。当然，用你自己的标志代替。

http://jsfiddle.net/bzoc9vbj/

#logo {
    width:64px;
    height:64px;
    position: absolute;
    top:0;
    left:0;
    background-image:url('https://asciinema.org/assets/bitcoin-logo-48563026498d25219c7e2ec2b978184b.png');
}
于 2014-09-22T15:29:19.017 回答