Missalignment mit inline-block (andere Elemente nach unten gedrückt)

Ich versuche, richten Sie kleine Boxen in einer Reihe. Diese Boxen haben so etwas wie 2-Elemente in jedem. In einigen Fällen, das erste element ist, so "viel" text, dass es teilt sich in 2 Linien. Wenn dies geschieht, werden alle anderen Blöcke in dieser special-Linie dargestellt.

Lange Rede, kurzer Sinn, hier ist das Beispiel:
http://jsfiddle.net/PMRQ5/

Wenn Sie die Größe der HTML-Feld, können Sie sehen, was ich meine. Kann jemand helfen?

CSS:

.songlist .even {
  background: #c2e4fa;
  background: -moz-linear-gradient(top, #d9eefc, #c2e4fa);
  margin-right: 5px;
}
.songlist .odd {
  background: #faf4c2;
  background: -moz-linear-gradient(top, #fcf8d9, #faf4c2);
  margin-right: 5px;
}
.songlist .itemBox {
  font-size: 11px;
  width: 220px;
  min-height: 100px;
  clear: both;
  padding: 5px;
  margin: 5px 10px 5px 10px;
  display: inline-block;
  position: relative;
  border-radius: 4px;
}
.songlist .itemBox .title {
  font-weight: bold;
  font-size: 16px;
}
.songlist .itemBox .artist {
  clear: left;
  font-size: 11px;
}
.songlist .itemBox .titlerating {
  bottom: 10px;
  left: 10px;
  position: absolute;
}
.songlist .itemBox .dance {
  bottom: 5px;
  right: 10px;
  position: absolute;
}

HTML:

<div class='songlist'>
  <div class='itemBox even'>
    <div class='cover'></div>
    <div class='title'>You and you</div>
    <div class='artist'>101 Strings Orchestra</div>
    <div class='clear'></div>
  </div>
  <div class='itemBox odd'>
    <div class='title'>The Queen's lace hankerchief waltz</div>
    <div class='artist'>101 Strings Orchestra</div>
    <div class='clear'></div>
  </div>
  <div class='itemBox even'>
    <div class='cover'></div>
    <div class='title'>Voices of spring</div>
    <div class='artist'>101 Strings Orchestra</div>
    <div class='clear'></div>
  </div>
  <div class='itemBox odd'>
    <div class='cover'></div>
    <div class='title'>Roses from the south</div>
    <div class='artist'>101 Strings Orchestra</div>
    <div class='clear'></div>
  </div>
</div>

Gah, es scheint, Sie sind mit einer seltsamen Mischung von Werten um diesen Effekt zu bekommen. Was genau ist Ihre gewünschte Ergebnis? Die "bewegte Elemente" ist standard bei der Verwendung von inline-block. Sie wollen, dass Sie nie verschieben aus der oberen Zeile, wenn das Fenster in der Größe verändert?

InformationsquelleAutor simon | 2011-11-14

125

http://jsfiddle.net/PMRQ5/1/

Hinzufügen vertical-align: top oder vertical-align: bottom zu der box, hängt davon ab, was Sie wollen.
- Vielen Dank - das war die Lösung 🙂
- nicht für mich und es treibt mich in den Wahnsinn... jsfiddle.net/CPAtE
- Sie müssen das vertical-align auf die .slide: jsfiddle.net/CPAtE/1
- funktioniert nicht... müssen Sie vertical-align: top auf das element, das Sie versuchen zu beheben, nicht auf den container
- Das funktioniert, aber warum passiert es in Erster Linie, ob die Boxen sind genau die gleiche Größe wie jedes andere?
- In Fall, dass Sie sich immer noch Fragen... Weil ein inline-block verhält sich nicht wie ein block. Es wirkt ein bisschen wie ein inline-element. Die Standard-Ausrichtung der inline-block "baseline" das ist ein bisschen unberechenbar. Volle Spezifikation und Beispiele: developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
InformationsquelleAutor JNDPNT

CSS:

.songlist .even {
  background:#c2e4fa;
  background:-moz-linear-gradient(top,#d9eefc,#c2e4fa);
  margin-right:5px;
}
.songlist .odd {
  background:#faf4c2;
  background:-moz-linear-gradient(top,#fcf8d9,#faf4c2);
  margin-right:5px;
}
.songlist .itemBox {
  font-size:11px;
  width:220px;
  min-height:100px;
  clear:both;
  padding:5px;
  margin:5px 10px 5px 10px;
  display:inline-block;
  position:relative;
  border-radius:4px;
  vertical-align: bottom;
}
.songlist .itemBox .title {
  font-weight:bold;
  font-size:16px;
}
.songlist .itemBox .artist {
  clear:left;
  font-size:11px;
}
.songlist .itemBox .titlerating {
  bottom:10px;
  left:10px;
  position:absolute;
}
.songlist .itemBox .dance {
  bottom:5px;
  right:10px;
  position:absolute;
}

HTML:

<div class='songlist'>
    <div class='itemBox even'>
        <div class='cover'></div>        
        <div class='title'>You and you</div>
        <div class='artist'>101 Strings Orchestra</div>        
        <div class='clear'></div>
    </div>                    
    <div class='itemBox odd'>    
        <div class='title'>The Queen's lace hankerchief waltz</div>
        <div class='artist'>101 Strings Orchestra</div>        
        <div class='clear'></div>
    </div>
    <div class='itemBox even'>
        <div class='cover'></div>    
        <div class='title'>Voices of spring</div>
        <div class='artist'>101 Strings Orchestra</div>    
        <div class='clear'></div>
    </div>                    
    <div class='itemBox odd'>
        <div class='cover'></div>        
        <div class='title'>Roses from the south</div>
        <div class='artist'>101 Strings Orchestra</div>    
    <div class='clear'></div>
    </div>
</div>

InformationsquelleAutor Ani Menon

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.