Mitte div zwischen Mitte und links

Ich habe ein Logo in der Mitte ausgerichtet, und wenn ich die Bildschirm-/Fensterbreite anpassen, bleibt es in der Mitte perfekt. Auf der linken Seite des Logos habe ich ein kleines Menü mit nur zwei Wörtern, ich möchte, dass dieses Menü/Div immer zwischen dem Logo und der linken Kante ist.Mitte div zwischen Mitte und links

Kann dies mit nur CSS getan werden?

Zu beachten ist, dass das Logo seine eigene widht hat 200px aber ich kann dieses Problem beheben mit margin-left: -100px;. Und wenn es auf eine Bildschirmgröße kommt, wo es nicht mehr nach links passt, werde ich es unter das Logo mit @media screen and (max-width: px) { ... } setzen.

So: http://postimg.org/image/v148gyc9b/

Quelle

2015-01-18 Fredrik

Wenn das Logo eine feste Größe von 200 Pixel hat, Sie so etwas wie dieses versuchen:

#menu { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: calc(50% - 100px); 
}

Quelle

2015-01-18 00:39:17 Franz

Ja. Ich brauchte nur die Breite: calc (50% - 100px) für das Menü, und ich könnte den Rand-links entfernen: -100px; Ich hatte für das Logo! Ich werde das ein bisschen testen, aber es sieht aus wie es sollte funktionieren! Irgendeine Idee über den Browser unterstützt die calc? Vielen Dank! – Fredrik

Sie können die Browserunterstützung hier überprüfen: http://caniuse.com/#search=calc – Franz

Lassen Sie uns sagen, dass Sie diesen HTML haben:

<div class="header"> 
    <div class="menuContainer"> 
     <div class="menu"> 
      Menu 
      <!-- Your Menu here --> 
     </div> 
    </div> 
    <div class="logo">Logo</div> 
</div>

Ihr Logo hat eine statische Breite und Sie möchten nicht, dass es eine prozentuale Breite ist, damit Sie .menu den Platz zwischen uns einnehmen können en dem Logo und dem linken Rand mit diesem CSS:

.menuContainer { 
    width: 50%; 
    padding: 0 50px; /* 50 is (logoWidth/4) */ 
    margin-left: -50px; /* 50 is (logoWidth/4) */ 
    margin-right: -50px; /* 50 is (logoWidth/4) */ 
    box-sizing: border-box; 
    position: relative; 
    float: left; 
}

Vergessen Sie nicht, dass „50px“ zu ändern, wenn Sie die Breite des Logos mit Medienanfragen ändern.

Hier ist ein funktionierendes Beispiel bei JSFiddls: http://jsfiddle.net/3047kfkn/

Quelle

2015-01-18 04:28:20

Mitte div zwischen Mitte und links

Antwort

Verwandte Themen