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

Question

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

我已经设置了 2 个 jsfiddle

一个带有 .launchpad-button .x-btn-inner 空格的注释掉了。

jsfiddle 1

看起来不错，只是我想要全文(多行)

jsfiddle 2

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

编辑:

哇哦!它使用 ScottS 的解决方案工作，但是当我的窗口调整大小时或没有足够的空间时，我遇到了这个问题:新行(清晰:左)在错误的位置

Answer 1

如果每个只有三列宽，那么在你的 xtype: 'container' 中每第 4 个元素添加一个 cls: 'new-row' with css of. ..

.new-row {
    clear: left;
}

... fixes the issue .纯 css3(所以 only working in modern browsers )不需要将额外的类 new-row 添加到脚本中，而只需要这个 css 来选择每第 4 个元素:

.x-container:nth-of-type(4n) {
    clear: left;
}