0

我的网站是一个 wordpress 网站，但我相信我唯一需要解决的问题就是标题高度。主页作为一个 403px 高的旋转横幅，然后所有其他页面都有一个 303px 高的标题图像。我只是想让标题高度为自动，因此#container 将自动拥抱横幅的底部，无论其高度如何。

CSS

header { width: 960px; height: auto; margin: 0 auto; display: block;}

#container { width: 960px; margin: 20px auto; padding: 0 1.5em;}

还有什么应该让#container 意识到标头在那里？

更新：

新的 HTML

<div style="clear:both;"></div>
</div><!-- end of container-->

新的 CSS

#banner { 
    width: 960px;      /* same with already defined */
    height: 403px;
    margin: 0 auto;
 }

我所做的唯一想法略有不同是将导航放在标题而不是横幅下方，因为它位于我不想要的横幅下方。它看起来一样，但似乎与我之前所做的没有什么不同。我在横幅下的博客页面上仍然存在差距。

我感谢 Zuul 的帮助。我确实认为我还有更多工作要做，然后我们才能解决这个问题。谢谢！

4

2 回答 2

2

布局的问题不在于header标签，有些元素的位置很奇怪，导致了几个问题：

这是为了纠正布局流程而要做的事情的列表：

1)

从. <div id="banner">_<nav id="main-navigation">

<nav id="main-navigation">设置为height:70px并且滑块远高于此。

将其作为<header> 或之后<header>和 之前的子项<div id="container">。

例如，

<header>...</header>
<div id="banner">...</div>     <!-- here is better -->
<div id="container">...</div>

2)

在第一步之后，您可以从#banner以下 CSS 中删除：

消除

#banner {
    left: 50%;
    margin-left: -480px;
    position: absolute;
    top: 69px;
    width: 960px;
    z-index: 1;
}

添加

#banner {
    width: 960px;      /* same with already defined */
    height: 403px;
    margin: 0 auto;
}

3)

步骤 01 和 02 应与高度问题#banner一起固定位置。header

现在仍然修复#container包含浮动元素并应在最后清除的内容。

在这里，您当前的课程clearfix将不起作用，包含许多声明，我建议：

<div id="container">

   <div id="main">...</div>
   <aside>...</aside>

   <div style="clear:both;"></div>

</div>

在最后添加新<div style="clear:both;"></div>的#container将允许float清除并正常恢复文档流。

已编辑

第一阶段已经完成，现在您唯一需要做的就是height从中删除#banner，差距就会消失。

#banner {
    width: 960px;      /* keep this */
    margin: 0 auto;    /* keep this */
}
于 2012-06-06T20:18:31.763 回答
0

在容器 div 结束之前添加diva style。clear:both这将允许根据其中的内容制作容器 div 的高度。您可以创建一个名为的类clear，并在其中放置此样式，以便您可以class在网站的任何地方使用它。

于 2012-06-06T20:04:18.107 回答