WordPress的＆CSS3列数(Wordpress & CSS3 column-count)

我试图分裂事件列表到2列。 当我做一个简单的column-count ，我似乎无法让他们在顶部对齐。 缺少什么我在这里？

域名是在这里

<div id="eventssection">
    <img id="eventheader" src="/images/calendar.png">
    <div id="calendarcol">
    <?php echo do_shortcode('[events]'); ?>
    </div>
    <img id="eventmore" src="/images/moreevents.png">
</div>

#calendarcol {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-width: 15em;
-moz-column-width: 15em;
column-width: 15em;
width: 500px;
margin: 0 auto;
}

谢谢！

Answer 1:

添加到您的CSS：

.event-item {
    margin: 1em 0 !important;
    float: left;
    width: 250px;
}

浮动将确保每个元素都被读取其他元素的高度，然后将其放置相应。 虽然，您将需要使你的容器宽度的每个元素一半的宽度，使其中心在每个“列”文本

文章来源: Wordpress & CSS3 column-count