CSS3“列数”不对齐列的顶部（Wordpress，响应式）答案

【问题标题】：CSS3 "Column-count" does not align top of columns (Wordpress, responsive)CSS3“列数”不对齐列的顶部（Wordpress，响应式）
【发布时间】：2017-05-16 07:37:20
【问题描述】：

首先，我找到了that Question here，但答案不太适合我的情况，这就是我问一个问题的原因，这个问题可能看起来很相似，但实际上并非如此。如果这是有道理的：-D

我正在为来自cyberchimps 的“响应式”Wordpress 主题创建一个子主题。

为此，我需要将文本分为 3 列，而且还需要在站点的后端进行编辑。我用 CCS 做到了：

.col-940{
    clear: none;
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -webkit-column-gap: 40px;
    -moz-column-count: 3; /* Firefox */
    -moz-column-gap: 40px; 
    column-count: 3;
    column-gap: 40px;
}

p {
    margin: 5px 0px 0px 0px;
}

现在会产生问题，即第一列的起始位置比后面的低 5px。我不知道为什么。

如上所述，另一个线程中的答案不起作用，因为我也有只使用 2 列的子站点，这就是为什么我不能使用定义的宽度。文本所在的 div 上方/之前总是只有另一个 div。

(PHP) 文本所在的容器：

<?php if( have_posts() ) : ?>

    <?php while( have_posts() ) : the_post(); ?>

        <?php responsive_entry_before(); ?>
        <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <?php responsive_entry_top(); ?>

            <div class="post-entry">
                <?php the_content( __( 'Read more &#8250;', 'responsive' ) ); ?>
                <?php wp_link_pages( array( 'before' => '<div class="pagination">' . __( 'Pages:', 'responsive' ), 'after' => '</div>' ) ); ?>
            </div>
            <!-- end of .post-entry -->

            <?php responsive_entry_bottom(); ?>
        </div><!-- end of #post-<?php the_ID(); ?> -->

    <?php
    endwhile;

    get_template_part( 'loop-nav' );

else :

    get_template_part( 'loop-no-posts' );

endif;
?>

(HTML)由 PHP 生成的容器：

<div id="post-25" class="post-25 page type-page status-publish hentry">
    <!--
        <h1 class="entry-title post-title">Kontakt</h1>…
    -->
    <div class="post-entry">
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing …
        </p>
    </div>
    <!-- end of .post-entry -->
</div>
<!--end of #post-25 -->

屏幕：

Shot of the Situation

Shot with marked problem

【问题讨论】：

标签： html wordpress css column-count

【解决方案1】：

您已应用 5px margin-top 并且出现在列顶部的唯一位置是第一列的开头。你需要删除这个margin-top，也许用

    .post-entry > p:first-child {
      margin: 0;
    }

【讨论】：

谢谢！我爱你！删除那个边距对我来说很好！
如果您需要该边距怎么办？似乎是一个半解决方案。

【解决方案2】：

对我来说，我需要列中的每个项目都具有固定的高度。它也有垂直对齐的问题。我能够通过将项目上的 line-height 设置为项目的所需高度并将项目的内容包装在 div 中来修复垂直对齐。

ul {
    column-count: 2;
}
ul > li {
    line-height: 30px;
}
ul > li > div {
    height: 30px;
    line-height: 1.2;
}

【讨论】：

这太离题了； OP的问题不一样。