带有多行标签的按钮带来了列布局的麻烦

Question

我正在创建一个带按钮的动态面板。 De按钮具有图像“大”图像和标签。对于更长的标签，我想要多行标签。使用css可以强制多行bij设置white-space: normal。但是下一行的按钮会捕捉到该行的末尾。

我已经设置了2个jsfiddle的

一个.launchpad-button .x-btn-inner空白区注释掉了。

jsfiddle 1

看起来很好我只想要全文（所以多行）

jsfiddle 2

看起来不太好......我应该如何解决这个问题？

修改

Ow snap！它可以使用ScottS的解决方案但是当我的窗口调整大小或没有足够的空间时我会遇到这个问题：新行（清除：左）位于错误的位置

Answer 1

如果每个只有三列宽，那么cls: 'new-row'中的xtype: 'container'的每个第4项都会添加.new-row { clear: left; } ，而css为...

new-row

... fixes the issue。纯css3（所以only working in modern browsers）不需要在脚本中添加额外的类.x-container:nth-of-type(4n) { clear: left; } ，而只需要这个css来选择每个第4个元素：

{{1}}