如何在圖像下顯示多個相同列的WordPress博客文章？

我試圖顯示像雜誌文章一樣的所有博客文章。請參閱下面的鏈接確切的格式。如何在圖像下顯示多個相同列的WordPress博客文章？

的single.php

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="col-xs-12 main-blog"> 

      <?php 

     if(have_posts()): 

      while(have_posts()): the_post(); ?> 

       <?php the_title('<h1 class="entry-title">', '</h1>'); ?> 

       <article id="post-<?php the_ID(); ?>" <?php post_class(); ? 


       <div class="article-single"> 

       <p><?php the_content(); ?></p> 

       </article> 

      <?php endwhile; 

     endif; 


     ?> 

     </div> 
    </div> 
</div>

CSS

.article_single { 

    column-width: 150px; 
    -webkit-column-width: 150px; 
    -moz-column-width: 150px; 
    column-gap: 30px; 
    -webkit-column-gap: 30px; 
    -moz-column-gap: 30px; 
    font-family: Garamond; 
    column-count: 3; 


}

無論我做什麼的內容也調整圖像大小。如何顯示內容而不會搞亂圖像？

來源

2016-10-01 Michael Stokes

哪裏PHP調用功能的圖像和HTML和CSS？ – markratledge

圖像已通過儀表板手動插入帖子。我還沒有嘗試過使用特色圖片的電話。 HTML和CSS已發佈在問題中。 –

不知道你到底是什麼問題，因爲沒有呼叫在這裏展示的特色圖片，但值得指出的是，您：

<div class="article-single">

沒有結束</div>標籤的任何地方。這可能是你的佈局。似乎它應該就在你的</article>

來源

2016-10-02 01:44:37

我解決它通過添加特色的圖像調用。謝謝！

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="col-xs-12 main-blog"> 



      <?php 

     if(have_posts()): 

      while(have_posts()): the_post(); ?> 

       <?php the_title('<h1 class="entry-title">', '</h1>'); ?> 

       <article id="post-<?php the_ID(); ?>" <?php post_class(); ? >> 








       <?php if(has_post_thumbnail()): ?> 

        <div class="text-center"><?php the_post_thumbnail('large'); ?></div> 

       <?php endif; ?> 

       <div class="article_single"> 

       <p><?php the_content(); ?></p> 


       </article> 





      <?php endwhile; 

     endif; 


     ?> 

    </div> 
</div>

來源

2016-10-02 01:54:23

如何在圖像下顯示多個相同列的WordPress博客文章？

回答

相關問題