Question

我在这个网站上有两个CSS浮动问题（http://melisayavas.com/web），我无法弄明白。第一个就在主页上。我有两个javascript幻灯片，下面有一个很大的空白区域。为什么？

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

这是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，因为它具有将其拉伸到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
}

css在wordpress中浮动和边缘问题

1 个答案: