Question

我有一个css代码。为什么“底部：0”在“位置：相对”时不起作用如果我放弃“位置：亲属;”到“底部”工作，但“浮动：左”和“浮动：右”不在“宽度：930px;”。抱歉，我的英文不好

<style type="text/css">
#main {
    position: relative;
    width: 930px;
    padding:10px;
    margin:0 auto; 
}

#left {
    position:absolute;
    left:0;
}

#right {
 position:absolute;
 right:0;
}

#bottom {
    position: absolute;
    bottom:0;
}
</style>

<div id="main">
    <div id="left">
        Left
    </div>
    <div id="right">
        Right
    </div>
    <div id="bottom">
        Bottom
    </div>
</div>

Answer 1

这是因为当您在主要设置position:relative时，position:absolute将相对连接到父级。并且您的#main div没有高度，导致#bottom不在页面底部。

Answer 2

这不是要走的路，请使用float进行此类布局。

回到你的问题，

bottom:0工作正常但由于你的主要没有高度，你没有看到它，

为#main，

执行此操作

    #main
    {
        position: relative;
        width: 930px;
        padding:10px;
        margin:0 auto; 
        height:200px;
    }

修改：

你可以使用，

#main {
    position: relative;
    width: 930px;
    padding:10px;
    margin:0 auto; 
}

#left {
    position:absolute;
    left:0;
    top:0;
}

#right {
 position:absolute;
 right:0;
 top:0;
}

#bottom {
    left:0;
    position: absolute;
    bottom:-20px;
}

但我不推荐这个（我之前说过这个布局不应该由float来处理） absolute未考虑其他元素的position，因此如果#left的身高更高，此代码将会中断。

如果我是你，我会用这个，

#main {
    position: relative;
    width: 930px;
    padding:10px;
    margin:0 auto; 
}

#left {
    float:left;
}

#right {
  float:right;
}

#bottom {
    clear:both;
}

绝对：底部不起作用

2 个答案: