CSS column-count 有效，但希望控制它打破列的位置

Question

我使用一个名为 Event List 的 WordPress 插件，它借助简码 - [event-list] 列出任何页面上的事件（带有文本和图片）。

列表以一长列显示，我一直在努力尝试使其以列显示。问插件的作者，他只是回答：“可能用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%;
}