WordPress中的CSS float 和边距问题

Question

我在这个网站 ( http://melisayavas.com/web ) 上有两个我无法解决的 CSS float 问题。第一个就在主页上。我有两张 javascript 幻灯片，它们下面有一大片空白区域。为什么？

第二个问题出现在新闻页面 - http://melisayavas.com/web/?page_id=30 - 侧边栏根本没有 float 在它应该 float 的位置。同样，我不知道是什么元素阻止了 float 。

这是 header.php 中的 HTML 代码:

    <article class="post" id="post-<?php the_ID(); ?>">
        <div class="homepage">
            <div class="testimonials"><?php slidedeck( 58, array( 'width' => '500px', 'height' => '550px' ) ); ?>
            </div>
            <div class="images"><?php slidedeck( 66, array( 'width' => '400px', 'height' => '550px' ) ); ?>
            </div>
        </div>
    </article>

这是相关的CSS:

article, aside, figure, footer, header, hgroup, nav, section {
display: block;
overflow: hidden;
clear: both;
} 

 .post {
border: 2px solid;
border-radius: 10px;
clear: both; 
overflow: hidden; 
padding: 20px;
margin-top: 28px;
}

.testimonials {position: relative;}
.images {position:relative;margin-left: 543px; top: -556px; width: 100%;}

新闻页面的 HTML:

<div class="news-page">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
<div class="news">
    <article <?php post_class() ?> id="post-<?php the_ID(); ?>">
        <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
        <?php include (TEMPLATEPATH . '/_/inc/meta.php' ); ?>
        <div class="entry">
            <?php the_content(); ?>
        </div>
    </article>
</div>
<?php endwhile; ?>
<?php include (TEMPLATEPATH . '/_/inc/nav.php' ); ?>
<?php else : ?>
    <h2>Not Found</h2>
<?php endif; ?>
</div>

还有 CSS:

  .news-page {
width: 100%;
  }

  .news {
float: left;
width: 60%;
  }
  #sidebar {float: right; width: 30%;}

Answer 1

首先，我建议使用 firebug(对于 firefox)或 Chrome，因为它内置了开发人员工具。IE 有一个替代方案，也称为 IE 开发人员工具。

我正在使用 Chrome 开发人员工具，当我检查您网站上的主页类时，我发现它的计算宽度和高度分别为 976px 和 1100px。我查看了您的 .css 文件，发现 .homepage 类的高度没有在任何地方设置。换句话说，div 元素的高度为 1100px，因为它的内容将其拉伸(stretch)到 1100px。

您的 div.homepage 包含以下内容:

<div class="slidedeck_frame skin-fullwidth-sexy-black">
<dl id="SlideDeck_275_58" class="slidedeck slidedeck_58" style="width:500px;height:550px">
...
</dl>
</div>

<div class="slidedeck_frame skin-fullwidth-sexy-black">
<dl id="SlideDeck_275_58" class="slidedeck slidedeck_58" style="width:500px;height:550px">
...
</dl>
</div>

这两个高度为 550px 的元素各自为 .homepage 元素提供了 1100px 的高度。

可能的修复方法是直接设置 .homepage 的高度(例如，设置为 700px)。

至于你问题的第二部分，你目前有这个:
div.news-page 的宽度:100%，并且未设置为 float 。
div.news 位于 div.news-page 内。
div.news 的宽度为 60%。
div#sidebar 设置为向右浮动，宽度为 30%

解决方案:

.news-page
{
width: 70%; // takes 70% of it's parent element, page-wrap
float: left;
}

.news
{
width: 100%; // takes all space available by it's parent
}

#sidebar
{
width: 30%; // takes 30% of it's parent element, page-wrap
float:  right;
margin-top: 30px; // so it does not cover your navigation bar
}