Question

我无法想象我的生活。我在容器内有2个div，我试图粘在屏幕顶部。 1 div包含一个菜单，另一个div包含几个链接。容器必须在内页上方居中，背景只能是960px，然后div1和div2应该在该容器内部。一个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

为什么不尝试这样的事呢？它干净而且极简，但我认为它可以很好地实现你的目标。我已经添加了边框和最大宽度来辅助示例，但建议您在适应过程中删除它们。

＆＃13;

.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;
  }

＆＃13;

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

＆＃13;

Answer 2

在

中添加display = inline-block;

.sf-menu li {
        background: silver;
        display = inline-block;
    }

但我建议使用bootstrap的导航栏来实现这一目标。使用navbar很容易实现。

＆＃13;

    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;
        display:inline-block;
    }
    .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;
    }

＆＃13;

<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<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>

＆＃13;

Answer 3

您是否尝试过使用float：left＆amp;向右浮动？当您的容器被修复时，内容应该被修复而不必声明它？

Answer 4

我不是完全理解，但你在找这样的东西吗？

    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;
        display:inline-block;
    }
    .user-logout {
        position:absolute;
        right: 23%;
        z-index: 999;
        margin-top: 1px;
        display:inline-block;
    }
    .user-logout a.sf-right {
        color: white;
        margin-right: 14px;
    }
    .user-logout a#signout {
        position: absolute;
        left: 105px;
        top: 0;
        width: 75px;
    }

<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>

Answer 5

这是使用flexbox

的最小示例

＆＃13;

.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: #ddd;
}

.container {
    margin: 0 auto;
    width: 100%;
    max-width: 960px;
    height: 30px;
    color: white;
    background: red;
    display: flex;
    align-items: center;
}

.nav {
    flex: 1 1 auto;
    width: 100%;
}

.user {
    flex: 0 1 auto;
}

＆＃13;

<div class="sticky">
    <div class="container">
        <nav class="nav">Navigation</nav>
        <div class="user">User</div>
    </div>
</div>

＆＃13;

或者你可以check it out as a jsfiddle

呃把2个div放在中心容器的内部，这个容器粘在上面

5 个答案: