2

我在这个网站（http://melisayavas.com/web）上有两个我无法弄清楚的 CSS 浮动问题。第一个就在主页上。我有两张 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%;}
4

1 回答 1

2

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

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

您的 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 的高度（例如，设置为 700 像素）。

至于你问题的第二部分，你目前有这个：
div.news-page has width: 100%, and is not set to 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
}
于 2012-04-09T22:15:35.740 回答