Wie kann ein Div an der Spitze seines übergeordneten Elements ausgerichtet werden, wobei das Inline-Block-Verhalten beibehalten wird?

Siehe: http://jsfiddle.net/b2BpB/1/

F: Wie können Sie Box1 und Box3 an der Oberseite des übergeordneten Div ausrichten boxContainer?

#boxContainerContainer {
  background: #fdd;
  text-align: center;
}

#boxContainer {
  display: inline-block;
  border: thick dotted #060;
  margin: 0px auto 10px auto;
  text-align: left;
}

#box1 {
  width: 50px;
  height: 50px;
  background: #999;
  display: inline-block;
}

#box2 {
  width: 50px;
  height: 100px;
  background: #999;
  display: inline-block;
}

#box3 {
  width: 50px;
  height: 50px;
  background: #999;
  display: inline-block;
}

Hilfe sehr geschätzt ...

Bestätigung: Diese Frage wurde aus einer Antwort abgeleitet, die zuvor von https://stackoverflow.com/users/20578/paul-d-waite gegeben wurde : Ein CSS-Element wird automatisch auf die Inhaltsbreite angepasst und gleichzeitig zentriert

Probieren Sie die vertical-alignCSS-Eigenschaft aus.

#box1 {
    width: 50px;
    height: 50px;
    background: #999;
    display: inline-block;
    vertical-align: top; /* here */
}

Wende es auch an #box3.

Wie andere gesagt haben, vertical-align: topist dein Freund.

Als Bonus gibt es hier eine gegabelte Geige mit zusätzlichen Verbesserungen, die es auch in Internet Explorer 6 und Internet Explorer 7 funktionieren lassen;)

Beispiel: hier

Verwenden Sie die vertikale Ausrichtung: oben; für das Element, das Sie oben wollen, wie ich auf Ihrer jsfiddle gezeigt habe.

http://www.brunildo.org/test/inline-block.html

Sie können float hinzufügen: left; für jede der Boxen (Box1, Box2, Box3).

http://jsfiddle.net/Wa4ma/

Oder Sie können einfach etwas Inhalt zum div hinzufügen und die Inline-Tabelle verwenden