Q:

Inline block increase spacing between elements and keep the alignment

I have a problem to increase the space between elements within an inline block container. I found a trick to do that but it works only for the first line...
By the way, I have n number of elements and a specific container width.
The code:
<!DOCTYPE html>
<html>
    <head>
        <style>
            .container {
                background-color: blue;
                height: 300px;
                width: 620px;
                display: inline-block;
            }

            .container div + div {
                margin-left: 33px;
            }

            .child1 {
                width:200px;
                height: 100px;
                display:inline-block;
                background-color: red;
            }

            .child2 {
                width: 200px;
                height: 100px;
                display: inline-block;
                background-color: green;
            }

            .child3 {
                width: 200px;
                height: 100px;
                display: inline-block;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="child1"></div>
            <div class="child2"></div>
            <div class="child3"></div>
        </div>
    </body>
</html>

The Result:

(Note: It has to support all browsers, +IE7)
Thank you very much!

A:

Use the nth-child selector to select every three child!
https://jsfiddle.net/25x4ga0g/1/
.container div:nth-child(2n + 1) {
  margin-left: 0px;
}

More about nth-child selector

