clearfix parent上的额外空间

时间:2013-06-14 08:21:42

标签: html css clearfix

我有一个布局,其中侧边栏是固定的,主要内容容器是流动的。

        <div id="contents" class="wrapper group">
            <aside id="sidebar">
                <!-- sidebar stuff here -->
            </aside>
            <section id="main-contents">
                <!-- content here -->
            </section>
        </div>

http://jsfiddle.net/QzsL5/2/

当我将“class”类应用于Feed的 ul 时, ul 会在其高度上添加额外的像素,它不会只包裹 li 在里面。但是当我删除侧边栏时,没有显示这个额外的高度。我注意到 ul 的底部与侧边栏的底部对齐。

我不知道它为什么会这样。对此的帮助将不胜感激。

谢谢:)

1 个答案:

答案 0 :(得分:0)

我认为你可能缺少的是你的CSS中的'clearfix'解决方案。

更新小提琴:http://jsfiddle.net/QzsL5/4/

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

在您的css中实施上述内容后,请将以下类名“clearfix”添加到您的UL。