Hi guys, having a little issue, I have a list of links which I’m floating left, which produces the results within image A, however what I’m trying to achieve is image B.
My issue is, I’m pulling in a list of items within anchor tags but I can’t edit the actual loop code, simply the CSS file, usually I’d simply wrap items in a table to work around this issue but I was wondering if there’s a simple workaround to float items top left, bottom left then repeat rather than item all on one row and then the next.
the issue I’m coming across with the JS version is ideally I don’t want to set a width, I want the container to be as wide as the number of items help within it. so that when items are added it simply gets extended, from which I can then add a scroll functionality to.
It uses @HugoGiraudel‘s concept, @wolfcry911‘s technique and some slight changes/additions of my own: mainly, the use of inline-block and text-align center to ensure that the list will adapt (and stay centered) if the number of list items changes.
UPDATE: I have also configured it to scroll horizontally once the viewport isn’t wide enough!