Float unordered lists (UL) next to one another, and stack them at the bottom of each other, with no margins or spaces

后端 未结 3 908
灰色年华
灰色年华 2021-01-03 16:45

I have multiple unordered lists (UL) elements. Please check the image below:\"multiple

相关标签:
3条回答
  • 2021-01-03 17:11

    Well, this solution may not specifically answer your question but it may help you fix your problem:

    You won't be able to do this using float in the way you propose. The only solution I can think of would be to divide the elements into grouping DIVs (or your block element of choice) which are floated left. Essentially, you put each UL which belongs on the same Y-Axis into a column element of some sort:

    <div class="col">
        <ul><!-- LI elements here --></ul>
        <ul><!-- LI elements here --></ul>
    </div>
    
    <div class="col">
        <ul><!-- LI elements here --></ul>
        <ul><!-- LI elements here --></ul>
    </div>
    
    <div class="col">
        <ul><!-- LI elements here --></ul>
    </div>
    
    <div class="col">
        <ul><!-- LI elements here --></ul>
    </div>
    

    I know this isn't completely semantic because you're adding elements purely for presentational purposes however I don't see any other way to achieve this (unless you are able to use absolute/relative positioning - which might be feasible if you know the number of items in each list).

    Alternatively, there's probably a jQuery plugin or something along those lines which would allow you to position the elements dynamically but I don't know off the top of my head.

    0 讨论(0)
  • 2021-01-03 17:27

    That would be possible if you stacked them vertically. This jsfiddle here illustrates your problem, the next row of items will start off where the longest ul reaches in the previous row. Instead of creating new columns for the new row, you could insert the ul's back into the original columns to stack the ul's vertically. Take a look at this jsfiddle to see the difference.

    Sorry, don't know if you can reach those links. jsfiddle.net seems to be under heavy load right now.

    0 讨论(0)
  • 2021-01-03 17:27

    Although advices and suggestion given were indeed helpful,

    I solved the problem with jQuery Masonry, a jQuery plugin

    http://masonry.desandro.com/

    I'm not sure whether there are better ways to do it, but this one just worked

    Isotope, another jQuery plugin that looks similar to Masonry, could probably do the same job as Masonry but I haven't tested yet: http://isotope.metafizzy.co/

    thanks for reading and dropping by

    0 讨论(0)
提交回复
热议问题