How do I make a horizontal list of inline elements stack vertically when the div container is resized?

My problem (note the yellow tiles and how they "overflow"):

(link is http://i.stack.imgur.com/E6yDM.jpg) as I don't have enough reputation points.

The screenshot above shows how the little tiles (yellowish rectangles) disregard the boundaries of the grey box.

I want the tiles to behave similar to how I have simulated in the screenshot below:

(link is http://i.stack.imgur.com/xBhyJ.jpg) as I don't have enough reputation points.

So basically, I want the tiles (which are dynamically generated in JavaScript) to automatically respect the boundaries of their parent container and shift down to another row instead of overflowing.

The tiles are coded as such:

<span class='tile'>Tile content</span>

...and are dynamically generated using JavaScript. The tiles are place within a div:

<div id="conversionPanel" class="panel">
       <span class='tile'>Tile1</span>
       <span class='tile'>Tile2</span>
       <!-- etc. The number of tiles are variable -->
</div>

And the conversionPanel CSS is nothing special: margin: 0 auto; width: 500px;

The CSS I'm using for the tiles are:

.tile {
   display:inline;
   padding:5px;
   margin:3px;
   border:1px solid white;
   /* The rest is just lots of css3 visual stuff */
 }

Can any开发者_如何学编程body help me with this? I've searched everywhere but I couldn't find anything.

Easy. The code below treats each tile like a word in a wrapped line of text.

   .panel {
     text-align: center;
     width: 300px;
   }
   .tile {
     display:inline-block;
     padding:5px;
     margin:3px;
     border:1px solid white;
   }