Question

我正在整理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>

非常感谢任何帮助！

Answer 1

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

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

Answer 2

你需要添加一个明确的：两者;在旁边元素关闭之后。

所以，之后：

<aside>
    Testing
</aside>

添加：

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

你会发现问题应该得到解决。

当然，最好是制作.clear CSS类并调用它，而不是使用内联CSS。

添加侧栏时，容器不会跨越页面的高度

2 个答案: