2011-02-18 22 views
6

Esto es súper simple y estoy completamente desconcertado por este comportamiento. Quiero que mis resultados de búsqueda se muestren en una bonita cuadrícula de bloques de 2 en una fila. Pero en cambio aparece torcido donde el div con más texto empuja a otros hacia abajo con su contenido. ¿Cómo puedo arreglar esto?Un elemento con más texto empuja hacia abajo otros elementos de bloque en línea. ¿Por qué?

Aquí está un ejemplo simplificado que muestra el problema en Chrome y FF:

<html> 
<body> 
    <style> 
    .search_result 
    { 
     border: thin solid; 
     width: 250px; 
     height:200px; 
     display: inline-block; 
    } 
    </style> 
    <div style='width:508px'> 
     <div class='search_result'> 
      Meerkats demonstrate altruistic behavior within their colonies; one or more meerkats stand sentry while others are foraging or playing, to warn them of approaching dangers ... 
     </div> 
     <div class='search_result'> 
      one or more meerkats stand sentry 
     </div> 
     <div class='search_result'> 
      meerkats 
     </div> 
    </div> 
</body> 
</html> 

Respuesta

17

En .search_result, añadir vertical-align: top.

Live Demo

+0

Awesome! ¡gracias! –

Cuestiones relacionadas