CSS3「列計數」不排列列頂（WordPress的，響應）

首先，我發現that Question here但答案不會適合我的情況，這就是爲什麼我問一個問題，這可能看起來相似但不是。如果這是有道理不知何故:-DCSS3「列計數」不排列列頂（WordPress的，響應）

我正在從cyberchimps創建一個childtheme到「響應」-Wordpresstheme。

爲此，我需要將文本形成爲3列，但也可以在網站的後端進行編輯。我設法與CCS：

.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; 
}

那現在產生的問題，第一列開始比以下事例爲5px低。我無法弄清楚爲什麼。

如上所述，其他線程的答案將不起作用，因爲我也有隻使用2列的子站點，這就是爲什麼我不能使用定義的寬度。上方/之前的文本是在那裏總是隻有另一個股利。

（PHP）容器中的文字是在：

<?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; 
?>

由PHP產生

（HTML）容器：

<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 -->

個

屏幕：

Shot of the Situation

Shot with marked problem

來源

2014-09-05 Maggot

你已經申請爲5px邊距和發生在塔的頂部是第一個開始的地方。您需要刪除此邊距，也許

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

來源

2014-09-05 18:15:01 surreymagpie

謝謝！我愛你！刪除該保證金對我來說效果不錯！ – Maggot 2014-09-05 19:47:24

如果您需要該保證金，該怎麼辦？看起來像一個半解決方案。 – Ravenstine 2016-10-13 00:07:10

-1

對於我來說，我需要每個項目在列有一個固定的高度。它也有垂直對齊的問題。我能夠通過將物品的線高設置爲物品的所需高度並將物品的內容包裹在div中來修復垂直對齊。

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

來源

2017-03-14 23:19:14

這是非常關注的話題; OP的問題是不一樣的。 – Cyril 2017-03-14 23:44:27

CSS3「列計數」不排列列頂（WordPress的，響應）

回答

相關問題