Wordpress& CSS3列数 [英] Wordpress & CSS3 column-count

问题描述

我想将事件列表分为2列。当我做一个简单的列计数，我似乎不能让他们在顶部对齐。我在这里缺少什么？

I'm trying to divide an events list into 2 columns. When I do a simple column-count, I can't seem to get them to align at the top. What am I missing 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：

Add this to your CSS:

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

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

The float will make sure that each element is reading the height of the other elements and will then place them accordingly. Though, you will then need to make the width of each element half of the width of your container so that it centers your text in each "column"

这篇关于Wordpress& CSS3列数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！