parent div have text-align:left;

A <div> element has text-align:left; width:500px; and, inside it, a child <div> has more than 20 other <div> elements with 开发者_如何学Pythonwidth:20px;.

My question is, without using float:left how we can put all elements side by side from the left?

Screenshot:

I would guess that display: inline-block will get you pretty close to what you want. It will generate a block box for the contents (allowing you to specify block level properties such as width), which will then be flowed inline.

You can use the CSS3 Columns Module column-count property for this. You will also need to include the -moz and -webkit version for compatibility reasons:

#container {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}

Unfortunately, this property is not available on all versions of IE, so you'll need a Javascript alternative.

A good method would be to check for column-count support with Modernizr, then create two additional container elements each one-third the width of the parent, then using Javascript we can watch for expansions and pull the necessary number of elements to the other two to maintain even sizes.