Question

我想坚持3个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;
}

Answer 1

您可能需要从这些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。

Answer 2

Div是块元素，所以你需要从它们中删除margin-height，margin-height：0px;

我如何将这些div组合在一起？

2 个答案: