CSS column-count可以工作，但希望控制它在何处中断列

Question

我使用了一个名为Event List的WordPress插件，它在短代码事件列表的帮助下列出了任何页面上的事件(包含文本和图片)。

列表显示在一个很长的行中，我一直在努力让它以列的形式显示。当问到这个插件的作者时，他只是回答说：“大概可以用CSS来完成”。所以我试着找到了column-count属性，它很棒，可以做我想做的事情。

我知道它会自动平衡列，所以它会在不太理想的行上拆分列。它将日期留在页面底部的第1列，事件的图片从页面顶部的第2列开始。我目前使用以下简单的代码：

<style>
.split {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
  -webkit-column-width: 500px;
     -moz-column-width: 500px;
          column-width: 500px;
}
</style>

对于html，我使用：

<div class="split">[event-list]</div>

我认为css在这方面不是最好的，应该使用JavaScript，但这超出了我的能力范围。

Answer 1

这不是完整的答案，而是一种重新定位。是的，它可以通过插件EventList中的Javascript来实现……如果你添加一些像这样的东西，你的文本看起来会更漂亮

.split p {
  word-break: break-word;
  word-wrap: break-word;
  text-align: left;
  margin-top: 0;
}

.split img {
 display: block; 
 max-width: 100%;
}