列CSS空格

Question

我刚开始使用css列。我使用了之前question的解决方案 为了保持列之间的段落完整。

<div class="columns">
<p>Text to be kept in a single block and not split between two different columns</p>
</div>

.columns p{display:inline-block;}

在列中添加display:inline-block;元素，可防止它们在下一列的底部和顶部之间拆分。

然而，在Chrome浏览器中查看，我发现在列底部留下了大量空白区域。

以下是http://jsfiddle.net/r4ahhbj8/1/

的示例

有人有解决方案吗？

Answer 1

列应该有宽度，似乎不需要<p>。这是Fiddle中的演示：

演示：http://jsfiddle.net/r4ahhbj8/3/

我希望这能帮到你！

已编辑：使用<p>

从display:inlineblock删除了<p>。

演示：http://jsfiddle.net/r4ahhbj8/4/。