Wordpress & CSS3 列数答案

【问题标题】：Wordpress & CSS3 column-countWordpress & CSS3 列数
【发布时间】：2021-02-18 09:31:04
【问题描述】：

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

【问题讨论】：

标签： css wordpress css-multicolumn-layout

【解决方案1】：

将此添加到您的 CSS 中：

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

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

【讨论】：