CODEWITHSUNDEEP
htmlcssgoogle-chromefirefoxdom
Haradzieniec
Haradzieniec

Reputation: 9340

css: column-count property - how to modify it with css to modify the number of items in each column?

There is a http://jsfiddle.net/woyy389L/3 link for visualization of this question , it contains 4 columns and the columns are as 5+5+5+2=17 items in this ul.

Can it be done as 5+4+4+4 items with css fix only without breaking the html structure?

Displayed properly in Firefox and Chrome.

The css code is:

ul{
   -webkit-column-count: 4;
    -moz-column-count: 4;    
    border:1px solid red;
}

Html code is:

<ul>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
</ul>

Thank you.

Upvotes: 0

Views: 76

Answers (1)

Jonny Haynes
Jonny Haynes

Reputation: 3186

As far as I'm aware that's not currently possible with just HTML/CSS alone.

Chris Coyier's CSS Tricks gives a good overview of what's currently possible: http://css-tricks.com/guide-responsive-friendly-css-columns/

For you to achieve what you're after you would have to either alter your HTML or use jQuery to insert closing and opening ul tags at the point you require and style it accordingly.

Upvotes: 1

Related Questions