javascript - Floated layouts - items running up-down-up-down, rather than side-to-side? -


when floating elements (list-items example) go side-by-side, wrap onto next line when there isn't enough space (width) left in container.

i wondering there way, floated list-items/div's display on top of each other. groups of 2 floated alongside each other, in example 2 below, example 1 being norm:

floated layouts

the frame in wireframe viewport, layout run off screen , scroll horizontally.

i'd without wrapping 2 items in containing div if can. this...

<ul>     <li>1</li>     <li>2</li>     <li>3</li>     <li>4</li> </ul> 

and not items 1 + 2 wrapped in div , same 3 + 4 , on - parents divs floated alongside each other.

my end goal create layout this, horizontally draggable rather scroll bar: website layout - horizontal scrolling

i've made codepen here: http://codepen.io/moy/pen/ovapek

the drag works ...when content fits on screen. divs cropped in viewport when attempting drag layout jumps around. if monitor isn't wide enough, can check reducing number of <figure>'s and/or alternating width set on container .project-list - problem need solve!

thanks, hope can help!

edit

i've forked version of codepen have columns set using css-columns , centred: http://codepen.io/moy/pen/waqnym

i've set [role="main"] {overflow: hidden;} hides horizontal scroll bar. content draggable doesn't behave expected.

also after initiating 'drag', top value set inline kinda messes responsiveness/centre alignment.


Comments

Popular posts from this blog

qt - Using float or double for own QML classes -

Create Outlook appointment via C# .Net -

ios - Swift Array Resetting Itself -