WordPress Blog Index CSS Maurerarbeit Layout

Question

Ich versuche, CSS multicolumn zu verwenden, um ein Mauerwerk Layout für die Blog-Indexseite einer WordPress-Website, die ich baue, zu erstellen, und ich habe einige Probleme damit. Ich benutze Bones als Startthema.

I eingestellt, um die Schleife in der home.php Datei mit dem Mauerwerk-Effekt zu erzeugen:

<?php get_header(); ?> 
<div id="content"> 
    <div id="inner-content" class="wrap cf"> 
     <main id="main" class="m-all t-2of3 d-5of7 cf" role="main" itemscope itemprop="mainContentOfPage" itemtype="http://schema.org/Blog"> 
      <div class="masonry-container"> 
       <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
        <div class="masonry-item"> 
         <article id="post-<?php the_ID(); ?>" <?php post_class('cf'); ?> role="article"> 
          <a href="<?php the_permalink(); ?>"> 
           <section class="entry-content cf"> 
            <h1 class="h2 entry-title"><?php the_title(); ?></h1> 
            <?php if (has_post_thumbnail()) : ?> 
             <div class="masonry-thumbnail"> 
              <?php the_post_thumbnail('masonry-thumb'); ?> 
              <span class="caption"><span><?php the_title(); ?></span></span></a> 
             <?php endif; ?> 
            </div><!--.masonry-thumbnail--> 
           </div> <!--.masonry-item--> 
           <div class="masonry-post-excerpt"> 
            <?php the_excerpt(); ?> 
           </div><!--.masonry-post-excerpt--> 
           <div class="blog-index-content"><?php the_content(); ?></div></a> 
          </section> 
         </article> 
        <?php endwhile; ?> 
        <?php bones_page_navi(); ?> 
       <?php else : ?> 
        <article id="post-not-found" class="hentry cf"> 
         <header class="article-header"> 
          <h1><?php _e('Oops, Post Not Found!', 'bonestheme'); ?></h1> 
         </header> 
         <section class="entry-content"> 
          <p><?php _e('Uh Oh. Something is missing. Try double checking things.', 'bonestheme'); ?></p> 
         </section> 
         <footer class="article-footer"> 
          <p><?php _e('This is the error message in the index.php template.', 'bonestheme'); ?></p> 
         </footer> 
        </article> 
       <?php endif; ?> 
      </div> <!--.masonry-container--> 
     </main> 
     <?php get_sidebar(); ?> 
    </div> 
</div> 
<?php get_footer(); ?> 

Ich versuche, das Bild, den ganz .masonry-item div mit der Post Thumbnail (kennzeichnete Bild) zu füllen, und rechts Jetzt ist das .masonry-item div größer als das post-Thumbnail.

Es gibt auch ein leeres <a> Tag, das unter dem Bild erscheint und ich kann nicht herausfinden, woher es kommt.

Ich versuche auch, den Posttitel über dem Thumbnail-Bild zu erscheinen, sobald es, und ich habe nicht herausgefunden, wie man es zur Arbeit bringt.

Hier ist ein Link zu meinem Test-Site: http://tippingpointphoto.flywheelsites.com/blog/

Jede Hilfe wäre sehr willkommen!

Answer 1

Innerhalb Ihrer .maurerei-thumbnail div gibt es einen <a> Link, das ist das leere Tag. Geben Sie ihm einen Klassennamen und ordnen Sie diese Stileigenschaften:

.link { // for example if you called it link 
display:block; // this will wrap it around the image 
position:relative; // to position the caption 
} 

Jetzt aktualisieren Sie Ihre .caption Klasse und fügen:

position:absolute; 
top:auto; 
bottom:0; // to text will start from the bottom of the image 
z-index:1; // to position the text above the image 

Und wenn ich an Ihrer Seite sah die Bildbreite erschien die div Breite passen also nehme ich an, du hast es geschafft, dieses Problem zu beheben? Wenn nicht ändern, ist es css, so dass die Breite auf 100% eingestellt ist.