0

我正在整理一个 Tumblr 布局，但遇到了障碍。我让一切正常，但是一旦我添加了侧边栏，容器就停止扩展页面的高度。它停在侧边栏的末尾，我不知道为什么以前它扩展了内容部分的宽度。

网址： http: //nellyswritingroom.tumblr.com/

结构 CSS：

#container {
    margin: 0 auto;
    padding: 30px 60px 30px 60px;
    width: 900px;
}
#main {
    margin-top: 50px;
}
#content {
    width: 620px;
    float: left;
    margin: 0;
}
aside {
    width: 220px;
    float: left;
    margin-left: 60px;
}


header#top {
    text-align: center;
    height: 293px;
    margin-bottom: 8px;
}

header#top h1{
    position:relative;
    width:500px;
    height:285px;
    overflow:hidden;
    float:left;
}

header#top h2 {
    position:relative;
    width:400px;
    height:285px;
    overflow:hidden;
    float:left;
}

HTML 骨架：

<div id="container">
    <header id="top>
        <h1>
        content
        </h1>
        <h2>
            content
        </h2>
    </header>

    <nav>Nav Goes here</nav>

    <section id="content">
        Content on the left
    </section>

    <aside>
        Sidebar Content
    </aside>
</div>

任何帮助将不胜感激！

4

2 回答 2

0

因为#content它是浮动的，它不再是布局的一部分，因此父级的大小仅包含侧边栏。

您应该float:left从内容部分中删除 ，并应用float:right到aside. 这确实假设内容总是比侧边栏长 - 如果不是这种情况，您可以在两个元素下方使用清除元素，或者也浮动容器，或者查看display:block或相对定位以将它们彼此相邻放置。

于 2013-05-31T14:00:40.520 回答
0

您需要添加一个明确的：两者；在 side 元素关闭后。

所以，之后：

<aside>
    Testing
</aside>

添加：

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

你会看到问题应该得到解决。

当然，最好创建一个 .clear CSS 类并调用它，而不是使用内联 CSS。

于 2013-05-31T14:01:41.040 回答