Question

我正在尝试将事件列表分成2列。当我做一个简单的column-count时，我似乎无法让它们在顶部对齐。我在这里想念的是什么？

域名为here

<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＆amp; CSS3列数

1 个答案: