Missalignment avec inline-block (autres éléments de poussée vers le bas)

Je suis en train d'aligner les petites boîtes dans une rangée. Ces boîtes ont quelque chose comme 2 éléments dans chacun. Dans certains cas, le premier élément est donc "beaucoup" de texte, qu'il divise en 2 lignes. Si cela se produit, tous les autres blocs dans cette ligne spéciale sont présentés ci-dessous.

Longue histoire courte, voici l'exemple:
http://jsfiddle.net/PMRQ5/

Si vous redimensionnez le champ HTML, vous pouvez voir ce que je veux dire. Quelqu'un peut-il aider?

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, il semble que vous êtes en utilisant un mélange étrange de valeurs pour obtenir cet effet. Quel est exactement le résultat recherché? Le "mouvement des éléments" est standard lors de l'utilisation de inline-block. Voulez-vous pour ne jamais se déplacer à partir de la ligne du haut lorsque la fenêtre est redimensionnée?
InformationsquelleAutor simon | 2011-11-14
  1. 127

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

    Ajouter vertical-align: top ou vertical-align: bottom de la boîte, dépend de ce que vous voulez.

    • Merci beaucoup - c'était la solution 🙂
    • ne fonctionne pas pour moi et ça me rend fou... jsfiddle.net/CPAtE
    • Vous devez définir le vertical-align de la .slide: jsfiddle.net/CPAtE/1
    • ne fonctionne pas... vous avez besoin d'ajouter vertical-align: top à l'élément que vous essayez de résoudre, pas à le conteneur
    • Cela fonctionne, mais pourquoi est-il se produire en premier lieu si les cases sont exactement la même taille que l'autre?
    • Dans le cas où vous vous demandez toujours... Parce qu'un inline-block ne se comporte pas comme un bloc. Il agit un peu comme un élément inline. L'alignement par défaut de l'inline-block "de base", qui est un peu imprévisible. Spécifications complètes et les exemples: developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
    • Pourriez-vous ajouter le code correspondant ici au lieu de juste dans le JS fiddle lien?

    InformationsquelleAutor JNDPNT
  2. 1

    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