jquery - 呃，将 2 个 div 放在居中容器的内联中，该容器粘在顶部

Question

我一生都无法弄清楚这一点。我在容器内有 2 个 div，我试图将其粘贴到屏幕顶部。 1 个 div 包含一个菜单，另一个 div 包含几个链接。容器必须在内页上方居中，并且背景只能为 960px，然后 div1 和 div2 应内联在该容器内。一个 div 左对齐，一个 div 右对齐。整个东西需要粘在顶部。

我已经多次接近它，但就是无法得到它。我当前的系统几乎可以工作，但被严重操纵，div2 不会留在容器内。当用户名根据其值增大或缩小时，或者当窗口宽度发生变化时，div2 会在背景周围和外部移动。

附件是一个示例和所需内容的线框。谁能帮我理解如何标记这个？这是我所拥有的内容的精简版本。

<div class="container">

<div id="sticky-top-head">
    <div id="block-superfish-1">
        <ul id="superfish-1" class="sf-menu">
            <li class=""><a href="#">Contribute</a>
                <ul class="sf-hidden"><!--li items -->
                </ul>
            </li>
            <li class=""><a href="#">My Lists</a>
                <ul class="sf-hidden"><!--li items -->
                </ul>
            </li>
        </ul>
    </div>
</div>

<div class="user-logout">
    <a id="username" class="sf-right" href="/user">Mattc</a>
    <a id="signout" class="sf-right" href="user/logout">Sign Out</a>            
</div></div>

CSS:

    div#sticky-top-head {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 999;
    }
    div#sticky-top-head #block-superfish-1 {
        width: 100%;
        background: silver;
        height: 21px;
        color: #eee;
        font-size: 12px;
        box-shadow: 1px 1px 2px 1px #1e1e1e;
    }
    .sf-menu li {
        background: silver;
    }
    .user-logout {
        position: fixed;
        right: 23%;
        top: 0;
        z-index: 999;
        margin-top: 1px;
    }
    .user-logout a.sf-right {
        color: white;
        margin-right: 14px;
    }
    .user-logout a#signout {
        position: absolute;
        left: 105px;
        top: 0;
        width: 75px;
    }

Wire frame Example

Answer 1

为什么不尝试这样的事情呢？它干净且简约，但我认为它很好地实现了您所追求的目标。我添加了边框和最大宽度来帮助示例，但建议您在调整过程中删除它们。

.container {
  width: 100%;
  position: fixed;
  border: 1px solid red;
  }

.container .content {
  width: 100%;
  max-width: 500px; /* SET THIS TO WIDTH OF YOUR CONTENT */
  margin: 0 auto;
  border: 1px solid blue;
  }

.container .content .nav {
  float: left;
 }

.container .content .logout {
  float: right;
  }

.clear {
  clear: both;
  }

<div class="container">
   <div class="content">
       <div class="nav">Navigation goes here</div>
       <div class="logout">Logout</div>
       <div class="clear"></div>
   </div>
</div>