Content in drei Spalten

<?php


If ( $association_query = $this->get_associated_posts() ) : ?>
  <div class="associated-posts">
  <?php While ($association_query->have_posts()) : $association_query->the_post(); ?>
  <div class="associated-post">
    <h3 class="post-title">
     <a href="<?php the_permalink(); ?>" title="Direkt zum Rezept <?php the_title(); ?> @Selleriesalat.com"><?php the_title() ?></a>
    </h3>
 
    <?php If ( $thumb = $this->get_post_thumbnail(get_the_id()) ) : ?>
    <?php $meinbild = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' ); ?>
    <div class="thumb-frame">
      <a href="<?php Echo $meinbild[0] ?>" rel="lightbox" title="<?php the_title() ?>">
        <img src="<?php Echo $thumb[1] ?>"
             width="<?php Echo $thumb[2] ?>"
             height="<?php Echo $thumb[3] ?>"
             alt="<?php the_title() ?>"
             title="<?php the_title() ?>"
             class="thumb post-preview-image alignleft" />
      </a>
    </div>
    <?php EndIf; ?>
    
         <div class="post-excerpt"><a href="<?php the_permalink(); ?>" title="Direkt zum Rezept <?php the_title(); ?> @Selleriesalat.com"><?php echo WPSEO_Frontend::metadesc( false ) ;?></a></div>
    
    <?php If ($thumb) : // In 99% of all cases we only need the clearer if we used a thumbnail image. ?>
    <div class="clear"></div>
    <?php EndIf; ?>
  </div>
  <?php EndWhile; ?>
  </div>
<?php EndIf;
/* End of File */

/* The container with the associated posts */




.associated-posts {
}




/* The container with ONE associated post */




.associated-posts .associated-post {
    width: 210px;
    min-height: 400px;
    background-color: rgba(255, 255, 255, 1);
    border: 1px;
    border-style: solid;
    border-radius: 18px;
    margin-bottom: 10px;




}




/* The header element with the title of the post */




.associated-posts .associated-post .post-title {
    text-align: center;
}




/* The link element inside the header with the title of the post */




.associated-posts .associated-post .post-title a {
    color: black;
    text-decoration: none;
}




/* The element which contains the post thumbnail image element */




.associated-posts .associated-post .thumb-frame {
    border: 1px;
    border-style: solid;
    border-radius: 18px;
    margin-bottom: 10px;




}




/* The post thumbnail image element itself */




.associated-posts .associated-post .thumb-frame img {
    border: 1px;
    border-style: solid;
    border-radius: 18px;
    margin-bottom: 10px;
    text-align: center;
    margin-left: 30px;
    margin-bottom: 13px;
}




/* The element which contains the post excerpt. (Only if you set up 'show an excerpt of the posts.') */
.associated-posts .associated-post .post-excerpt {
    text-align: center;
    color: black; 
}








.associated-posts .associated-post .post-excerpt a{
    text-align: center;
    color: black;
    text-decoration: none;
}




/* The clearing element. You can use it if you want. */
.associated-posts .clear {




  clear: both;
}