How can I get an odd column counter when I have an even number of columns?

Question

I have a column class that sets the number of CSS columns to three. It looks like this:

.columns {
  column-count:3;
  -moz-column-count:3;
  -webkit-column-count:3;
}

<ul class="columns">
  <li>Apples</li>
  <li>Grapes</li>
  <li>Pears</li>
  <li>Bananas</li>
</ul>

Run codeHide result

I would like this to display in the following format:

Apples Grapes Pears Bananas

This can be seen in this script: http://jsfiddle.net/fM8ce/1/

If I delete the bananas, then all three columns are used as expected and displayed as follows:

Apples Grapes Pears

This can be seen in this script: http://jsfiddle.net/fM8ce/

How can I get four elements for distribution, as expected, through three columns instead of 2?

Answer 1

, , css.

, display:inline-block float:left, - :

FIDDLE

<ul class="columns">
    <li>Apples</li>
    <li>Grapes</li>
    <li>Pears</li>
    <li>Bananas</li>
</ul>

CSS

.columns {
    width: 100%;
}
li {
    width: 33%;
    display:inline-block;
}

, , css, , , :

Apples Grapes Pears Bananas

css, :

Apples Pears Bannanas Grapes

css .