html - 以干净的方式对齐/堆叠大量小但大小不同的 div 框

Question

我正在对单词进行标签云式显示，每个单词都包含在小 div 中，并且浮动，因此每行都出现了许多单词。但是，如果我开始更改某些 div 中的字体大小，则线条结构会被打断并出现巨大的间隙，如下图所示：

任何人都可以就如何解决这个问题提供任何建议吗？我不想做任何花哨的事情，比如在较大的标签旁边有多行较小的标签：我只是希望 div 遵循正常的线条结构。

这是相关的CSS：

div.example {
background-color: #8C7D80;
padding: 2px;
margin: 2px;
float: left;
color: #96888B;
text-align: center;
position: relative;
}

Answer 1

尝试提高行高。括号似乎太大，从而打破了界限。

div.example {
  // other stuff here
  line-height: 1.5
}

您是否可以设置固定的行高？

Answer 2

我建议明确设置高度和/或更改 line-height 属性。

div.example {
    background-color: #8C7D80;
    padding: 2px;
    margin: 2px;
    float: left;
    line-height: 25px;
    height: 25px;
    color: #96888B;
    text-align: center;
    position: relative;
}