HTML/CSS - Responsive 3-Spalten-Navigationsleiste

Question

Ich habe wirklich Schwierigkeiten, das umzusetzen.

Ich möchte eine Navigationsleiste machen, die auf der Seite zentriert ist und 960px breit ist. Innerhalb dieser Navigationsleiste gibt es 3 verschiedene Abschnitte oder Spalten. Die ganz linke hat mindestens 200px. Die mittlere ist IMMER zentriert und immer 20px. Die ganz rechte hat mindestens 300px und ist rechts ausgerichtet. Bei vollen 960px würde es so aussehen:

Bei 740px würde es so aussehen:

Bei 620px würde es so aussehen:

Bei 520px würde es so aussehen:

Und darunter würde es in ein alternatives Design übergehen, also keine Sorge darüber. Was ist der beste Weg, dies umzusetzen?

Bearbeitung: Das ist, was ich im Moment habe. Es funktioniert bei 960px, aber die mittlere Abteilung bleibt nicht in der Mitte, wenn man die Größe ändert, wegen des Padding. Es fällt auch auseinander, wenn es zu klein wird und auf 2 Zeilen geht.

.left {
    float: left;
    width: 300px;
}
.right {
    float: right;
    width: 400px;
}
.middle {
    width: 100%;
    padding: 0 100px;
    height: 39px;
}

Answer 1

Sie sollten hier nur eine Media Query benötigen. Im folgenden Beispiel wird beim Verkleinern des Fensters das gelbe Div bis zu einer Breite von 620px zentriert sein, danach wird es zusammen mit dem pinken Div bis 520px gleiten, bevor es dann scrollt. Ich bin mir nicht sicher, ob Sie nach dieser Lösung oder nach der Lösung von @jhunlio gesucht haben.

html

css

body{
  margin: 0px;
}
.clean{
  clear: both;
}
.wrapper{
  height: 100px;
  position: relative;
  min-width: 520px;
}
.inner-wrapper{
  position: absolute;
  top: 0px;
  right: 0px;
  width: calc(50% + 10px);
  height: 100%;
}
.left-col{
  background: green;
  width: 200px;
  height: 100%;
}
.middle-col{
  width: 20px;
  height: 100%;
  float: left;
  background-color: yellow;
}
.right-col{
  float: right;
  width: 300px;
  background: pink;
  height: 100%;
}

@media screen and (max-width: 620px){
  .inner-wrapper{
    width: auto; 
  }
}

fiddle http://jsfiddle.net/BkFup/2/

Answer 2

Html

css

.navWrap {margin:auto; width:960px;}
.nav {
    float:left;
    width:100%;
}
.navLeft {
    width:20%;
    float:left;
    padding:10px 0;
    background-color:green;
}
.navCenterWrap {
    margin:auto;
    width:5%;
}
.navCenter {
    float:left;
    width:100%;
    padding:10px 0;
    background-color:yellow;
}
.navRight {
    width:30%;
    float:right;
    padding:10px 0;
    background-color:blue;
}

@media screen and (max-width: 740px){ 
    .navWrap {
        width:100%;
    }
}

@media screen and (max-width: 520px){ 
    .navWrap {
        width:100%;
    }
    .navLeft {
      width:40%; 
        margin:0;
    }
    .navCenterWrap {
        width:5%;
        float:left;
    }
    .navRight {
        width:55%;
        margin:0;
    }
}

note: scrollen Sie im Fiddle, um den Effekt zu sehen
funktionierendes Demo

Answer 3

Dies ist eine knifflige Aufgabe, da sie pixelgenaue Medienabfragen erfordert, um sie durchzuführen:

http://codepen.io/cimmanon/pen/cmJhx

  a
  bc

Beachten Sie den auskommentierten Freiraum ^^

body {
  margin: 0;
  padding: 0;
}

@media (min-width: 520px) and (max-width: 620px) {
  nav {
    text-align: right;
  }

  nav div {
    text-align: left;
    display: inline-block;
  }

  .a {
    float: left;
  }
}

@media (min-width: 620px) {
  nav {
    position: relative;
    overflow: hidden;
  }

  .a {
    float: left;
    min-width: 200px;
  }

  .b {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -10px;
  }

  .c {
    float: right;
    min-width: 300px;
  }
}

/* Farben! */

.a {
  background: green;
  min-width: 200px;
}

.b {
  background: yellow;
  width: 20px;
}

.c {
  background: pink;
  min-width: 300px;
}

Das Problem ist natürlich, wenn Ihre ersten/letzten Elemente nicht groß genug sind, um ihre Kinder zu enthalten. Da das mittlere Element absolut positioniert ist, um beim 620px-Breakpoint in der Mitte der Seite zu sein, darf es keinen Raum für Fehler geben.