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

【问题标题】：How do I make a horizontal list of inline elements stack vertically when the div container is resized?调整 div 容器大小时，如何垂直堆叠内联元素的水平列表？
【发布时间】：2011-03-10 08:14:27
【问题描述】：

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

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

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

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

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

所以基本上，我希望图块（在 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>

conversionPanel 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 */
 }

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

【问题讨论】：

您确定由 javascript 和 CSS 生成的元素吗？ spans 就像你描述的那样应该简单地包裹在 div 就像你描述的那样，一个简单的 text-align: center 应该可以解决问题，但是像这样溢出可能意味着你错过了一些元素或 CSS 属性
@madd0：是的，我三次检查 JavaScript 是否正确生成了“跨度”。此外，CSS 正在工作，因为当我在浏览器中测试我的代码时，瓷砖已经用渐变、阴影等进行了格式化。另外，我使用了 'span' 元素而不是 'div' 元素，因为它自己不做任何格式化（与 'div' 元素不同，它包括一个分节符）。

标签： html css layout

【解决方案1】：

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

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

【讨论】：

非常感谢！这非常有效。如此简单，却又如此优雅！ :D