html - 调整 div 容器大小时，如何使内联元素的水平列表垂直堆叠？

Question

我的问题(注意黄色方 block 以及它们如何“溢出”):

(链接是 http://i.stack.imgur.com/E6yDM.jpg)因为我没有足够的声望点数。

上面的屏幕截图显示了小方 block (淡黄色矩形)如何忽略灰色框的边界。

我希望瓷砖的行为类似于我在下面的屏幕截图中模拟的方式:

(链接是 http://i.stack.imgur.com/xBhyJ.jpg)因为我没有足够的声望点数。

所以基本上，我希望图 block (在 JavaScript 中动态生成)自动遵守其父容器的边界并向下移动到另一行而不是溢出。

图 block 编码如下:

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

...并且是使用 JavaScript 动态生成的。 磁贴放置在 div 中:

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

conversionPanel CSS 没什么特别的:margin: 0 auto;宽度:500px;

我为图 block 使用的 CSS 是:

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

谁能帮我解决这个问题？我到处搜索，但找不到任何东西。

Answer 1

简单。下面的代码将每个图 block 视为换行文本中的一个词。

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