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:
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:
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
Post a Comment