Question

我使用了一个名为“事件列表”的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%;
}

CSS列计数有效，但希望控制它在哪里中断列

1 个答案: