Desalineación con bloque en línea (otros elementos empujados hacia abajo)

Estoy intentando alinear cajas pequeñas seguidas. Estas cajas tienen algo así como 2 elementos en cada una. En algunos casos, el primer elemento es tan "mucho" texto, que se divide en 2 líneas. Si esto ocurre, todos los demás bloques en esta línea especial se muestran a continuación.Desalineación con bloque en línea (otros elementos empujados hacia abajo)

Para resumir, aquí está el ejemplo: http://jsfiddle.net/PMRQ5/

Si cambia el tamaño del campo HTML, se puede ver lo que quiero decir. ¿Alguien puede ayudar?

.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; 
 
}

<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>

Fuente

2011-11-14 simon

Gah, parece que estés usando una mezcla extraña de valores para conseguir este efecto. ¿Cuál es exactamente tu resultado deseado? El "movimiento de elementos" es estándar cuando se usa bloque en línea. ¿Desea que nunca se muevan desde la línea superior cuando se cambia el tamaño de la ventana? – Kyle

100

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

Añadir vertical-align: top o vertical-align: bottom a la caja, depende de lo que desea.

Fuente

2011-11-14 10:55:10 JNDPNT

Muchas gracias: esta fue la solución :) – simon

no funciona para mí y me está volviendo loco ... http://jsfiddle.net/CPAtE/ – ProblemsOfSumit

Tienes que establecer la alineación vertical al '.slide ': http://jsfiddle.net/CPAtE/1/ – JNDPNT

.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; 
 
}

<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>

Fuente

2016-12-24 07:20:50

Desalineación con bloque en línea (otros elementos empujados hacia abajo)

Respuesta

Cuestiones relacionadas