css - Wordpress & CSS3 列数

Question

我正在尝试将事件列表分为 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;
}

浮动将确保每个元素都在读取其他元素的高度，然后相应地放置它们。但是，您需要将每个元素的宽度设置为容器宽度的一半，以便将文本在每个“列”中居中