我如何將這些div粘在一起？

我想堅持3個div，但我不能。我不知道什麼是錯的。我如何將這些div粘在一起？

HTML

<div id="container"> 
    <?php if(have_posts()) : ?> 
     <?php while(have_posts()) : the_post(); ?> 
      <div class="post" id="post-<?php the_ID(); ?>"> 
       <h2> 
        <a href="<?php the_permalink(); ?>"title="<?php the_title(); ?>"><?php the_title(); ?></a> 
       </h2> 
      </div> 
      <div class="entry"><?php the_content(); ?></div> 

      <p class="postmetadata"> 
       <?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?><br /> 
       <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> 
       <?php edit_post_link('Edit', ' &#124; ', ''); ?> 
      </p> 
     <?php endwhile; ?> 

     <div class="navigation"><?php posts_nav_link(); ?></div> 

    <?php else : ?> 
     <div class="post"><h2><?php _e('Not Found'); ?></h2></div> 
    <?php endif; ?> 
</div>

CSS

.post{ 
    padding: 10px 5px 0 5px; 
    background-image: url(images/toppost.png); 
    background-repeat:no-repeat !important; 
} 


.post h2{ 
    font-family: Arial, Sans-serif; 
    font-size: 18px; 
    margin: 0px 0 0px 0px; 
} 

.entry{ 
    background-image:url(images/ContentBG.png); 
    margin: 0 0 0 0; 
    padding:0 5px !important; 
    background-position: bottom; 
} 

.postmetadata { 
    clear: both; 
    background-image: url(images/post-footer.png); 
    background-repeat: no-repeat; 
    height:118px; 
    padding:0 5px !important; 
}

來源

2011-09-04 Ben Daggers

你能發佈生成的HTML代碼嗎？有沒有標籤丟失？ –

請發佈最終標記，而不是中間腳本 –

-2

的div是塊元素，所以你需要從他們去除餘量，高度以及與利潤率高：0像素;

來源

2011-09-04 18:22:22

DIV默認保證金爲零 –

您可能需要從這些DIV中的元素中刪除邊距。例如。如果您的第一個DIV中的最後一個元素具有底邊，則會「泄漏」並導致間隙。這同樣適用於在你的第二個DIV的第一要素等

嘗試創建這個文件：

<html> 
    <head> 
    <style> 
    /*p, h2 { margin: 0; }*/ 
    </style> 
    </head> 

    <body> 
    <div style="background-color: #eee;"><p>Lorem ipsum</p></div> 
    <div style="background-color: #ddd;"><p>Dolor sit amet</p></div> 
    </body> 
</html>

和比較，當你取消註釋風格會發生什麼。請注意背景顏色在那裏，因此您可以可視化DIV。

來源

2011-09-04 18:25:17

對不起bobby，但請用英語。我只是一個在CSS自憐的新手。你是什麼意思？順便說一下，它的一個WordPress的索引文件和屏幕截圖顯示了每個郵政的容器，所以如果我有5個職位，我會看到5個這樣的盒子（只有幾個描述，可能會幫助你圖片） –

好吧，說你有兩個DIV，一個接一個，每個包含一個段落（我知道你的情況不同，但概念是相同的）。默認情況下，這些段落有一個邊距（頂部和底部）。由於CSS規範中一些相當模糊的規則，這些邊距似乎會「泄漏出」包含DIV，導致它們之間的差距。要刪除它，您需要從第一個P和第二個上邊距刪除底部邊距。如果還不清楚，我會嘗試在網上的某個地方舉個例子。 –

我想我明白你的意思。但問題是，當我把margin-bottom：0px; margin-top：0px;什麼都不會發生，結果仍然是一樣的。 –

我如何將這些div粘在一起？

回答

相關問題