1

我使用一个名为 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，但这不符合我的要求。

4

1 回答 1

0

这不是完整的答案，而是一个评论。是的，它可以通过插件 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%;
}
于 2018-08-11T10:51:05.477 回答