html - List items with alternating heights messing rows -
i having trouble list has items alternating heights based on content. causes rows break seen here: http://jsfiddle.net/pyrgb/ try re-sizing display view see effect.
what ideally list item continue next row space enough make row without hitting edge of above row. possible?
i know have mentioned 'rows' , table solution using lists keep display fluid , adaptable range of devices.
only solution have found set
min-height
content not overflow so: http://jsfiddle.net/pyrgb/1/ cannot predict amount of content in list items , list item adapt height if possible.
edit: note, if see resize display have 3 columns, can see effect need doesn't work in other situations. (not sure if same in browsers, using chrome 26)
thanks
remove float , make li display inline-block vertical align top.
http://jsfiddle.net/stevendwood/pyrgb/2/
ul li{ width: 100px; padding: 10px; margin: 0 0 20px 20px; border: 1px solid red; background: #eaeaea; display: inline-block; vertical-align: top; }
you can set vertical align middle or whatever prefer.
Comments
Post a Comment