Ugh Setzen Sie 2 Divs inline von zentrierten Container, die klebrig ist nach oben

Question

Ich kann das nicht für das Leben von mir herausfinden. Ich habe 2 Divs innerhalb eines Containers, den ich versuche, an den oberen Rand des Bildschirms zu kleben. 1 div enthält ein Menü, das andere div enthält ein paar Links. Der Container muss über der inneren Seite zentriert sein und der Hintergrund kann nur 960 px sein, dann sollten div1 und div2 innerhalb dieses Containers inline sein. Ein div ist nach links und einer nach rechts ausgerichtet. Und das Ganze muss ganz oben sein.

Ich bin schon oft gekommen, aber ich kann es nicht bekommen. Mein derzeitiges System funktioniert fast, ist aber extrem manipuliert, und div2 wird nicht innerhalb des Containers positiv bleiben. Wenn der Benutzername abhängig von seinem Wert wächst oder schrumpft oder wenn sich die Fensterbreite ändert, bewegt sich div2 außerhalb des Hintergrunds.

Beigefügt ist ein Beispiel und ein Drahtrahmen von was benötigt wird. Kann mir jemand helfen zu verstehen, wie man das markiert? Hier ist eine reduzierte Version von dem, was ich habe.

<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

Warum nicht versuchen, etwas Ähnliches statt? Es ist sauber und minimal, aber ich denke, dass es das erreicht, wonach Sie suchen. Ich habe Grenzen und eine maximale Breite hinzugefügt, um das Beispiel zu unterstützen, aber würde vorschlagen, dass Sie sie in Ihrer Anpassung natürlich entfernen.

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

Answer 2

Ich bin nicht ganz verstehen, aber suchen Sie dieser Suchbegriffe?

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 3

hinzufügen display = inline-block; in

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

Aber ich würde vorschlagen, Bootstrap des navbar mit, dies zu erreichen. Ganz einfach mit Navbar zu erreichen.

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

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

Answer 4

Haben Sie versucht, Schwimmer mit: links & float rechts statt? Wenn Ihr Container repariert ist, sollte der Inhalt repariert werden, ohne dass er deklariert werden muss?

Answer 5

Hier ist ein minimales Beispiel mit Flexbox

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

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

Oder Sie können check it out as a jsfiddle