Question

我的问题（注意黄色瓷砖以及它们如何“溢出”）：

（链接为http://i.stack.imgur.com/E6yDM.jpg），因为我没有足够的声誉点。

上面的屏幕截图显示了小瓷砖（黄色矩形）如何忽略灰色框的边界。

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

（链接为http://i.stack.imgur.com/xBhyJ.jpg），因为我没有足够的声誉点。

基本上，我希望tile（在JavaScript中动态生成）能够自动地尊重其父容器的边界，并向下移动到另一行而不是溢出。

瓷砖的编码如下：

<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>

convertPanel CSS并不特别：margin: 0 auto; width: 500px;

我用于瓷砖的CSS是：

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

有人可以帮我这个吗？我到处搜索，但找不到任何东西。

Answer 1

易。下面的代码将每个图块视为包装文本行中的单词。

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

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

1 个答案: