CSS3 „Column-count“ richtet den oberen Rand der Spalten nicht aus (WordPress, responsiv)

Lesezeit: 3 Minuten

Benutzeravatar von Maggot
Made

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 &#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)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:

Aufnahme der Situation

Schuss mit deutlichem Problem

Sie haben 5px margin-top angewendet und die einzige Stelle, die oben in einer Spalte vorkommt, ist der Anfang der ersten Spalte. Sie müssen diesen Rand oben entfernen, vielleicht mit

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

  • DANKE SCHÖN! ICH LIEBE DICH! Das Entfernen dieses Randes hat bei mir gut funktioniert!

    – Made

    5. September 2014 um 19:47 Uhr

  • Was ist, wenn Sie diese Marge benötigen? Scheint eine Halblösung zu sein.

    – Zehn Bitcomb

    13. Okt. 2016 um 0:07

Für mich brauchte ich, dass jedes Element in der Spalte eine feste Höhe hatte. Es gab auch Probleme mit der vertikalen Ausrichtung. Ich konnte die vertikale Ausrichtung korrigieren, indem ich eine Zeilenhöhe auf dem Element auf die gewünschte Höhe des Elements festgelegt und den Inhalt des Elements in ein Div eingeschlossen habe.

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

  • Das ist ziemlich unangebracht; Das Problem von OP ist nicht dasselbe.

    – Cyril

    14. März 2017 um 23:44

1450820cookie-checkCSS3 „Column-count“ richtet den oberen Rand der Spalten nicht aus (WordPress, responsiv)

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy