当div容器被调整大小时，如何制作垂直内嵌元素的水平列表？

我的问题（注意黄瓦，以及他们如何“溢出”）：当div容器被调整大小时，如何制作垂直内嵌元素的水平列表？

（链接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 */ 
}

能

人帮助我和这个？我到处搜索，但找不到任何东西。

来源

2011-03-10 Titus

你确定正在由javascript和你的CSS生成的元素？像你所描述的'span's应该简单地包裹在一个'div'中，就像你所描述的一样，一个简单的'text-align：center'应该可以做到这一点，但像这样溢出可能意味着你有一些元素或CSS属性错过了 – madd0

@ madd0：是的，我三重检查了JavaScript是否正确生成了“跨度”。此外，CSS正在工作，因为当我在浏览器中测试我的代码时，tile已经被格式化为渐变，阴影等。此外，我使用的是'span'元素而不是'div'元素，因为它本身没有进行任何格式化（不像'div'元素，其中包含段落中断）。 – Titus

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

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

来源

2011-03-10 00:14:27 SpliFF

非常感谢！这很有效。这么简单，但很优雅！：d – Titus

当div容器被调整大小时，如何制作垂直内嵌元素的水平列表？

回答

相关问题