首先,我找到了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 ›', '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 -->
屏幕:
最佳答案
您应用了 5px margin-top 并且出现在列顶部的唯一位置是在第一列的开头。你需要删除这个 margin-top,也许用
.post-entry > p:first-child {
margin: 0;
}
关于html - CSS3 "Column-count"不对齐列的顶部(WordPress,响应式),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25691526/