html - An element with more text pushes down other inline-block elements. Why? -
this super simple , i'm baffled behavior. want search results display in nice grid of blocks of 2 in row. instead shows crooked div more text pushes others down it's content. how can fix this?
here's simplified example shows problem in ff , chrome:
<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 colonies; 1 or more meerkats stand sentry while others foraging or playing, warn them of approaching dangers ... </div> <div class='search_result'> 1 or more meerkats stand sentry </div> <div class='search_result'> meerkats </div> </div> </body> </html>
on .search_result
, add vertical-align: top
.
Comments
Post a Comment