Zunächst einmal habe ich diese Frage hier gefunden, aber die Antwort passt nicht ganz auf meinen Fall, weshalb ich eine Frage stelle, die vielleicht ähnlich erscheint, es aber nicht ist. Wenn das irgendwie Sinn macht 😀
Ich erstelle ein Childtheme zum „responsive“-Wordpresstheme von cyberchimps.
Dafür brauchte ich Text, der in drei Spalten geformt, aber auch im Backend der Site bearbeitet werden konnte. Das habe ich mit CCS geschafft:
.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;
}
Dadurch entsteht nun das Problem, dass die erste Spalte 5 Pixel tiefer beginnt als die folgenden. Ich kann nicht herausfinden, warum.
Wie oben gesagt, wird die Antwort im anderen Thread nicht funktionieren, da ich auch Unterseiten habe, die nur 2 Spalten verwenden, weshalb ich keine definierte Breite verwenden kann. Über/vor dem Div, in dem sich der Text befindet, befindet sich immer nur ein weiteres Div.
(PHP)Container, in dem sich der Text befindet:
<?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)Container, wie er von PHP erzeugt wird:
<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 -->
Bildschirme: