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

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -